@eui/eds 22.0.0-alpha.21 → 22.0.0-alpha.23

package/fesm2022/eui-eds-eds-feedback-message.mjs

@@ -1,31 +1,35 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@eui/eds/shared';
-import { EdsColorDirective } from '@eui/eds/shared';
-import * as i2 from '@eui/eds/utilities/eds-icon-state';
-import { EDS_ICON_STATE } from '@eui/eds/utilities/eds-icon-state';
+import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@eui/eds/eds-icon-state';
+import { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';
 
 /**
  * A feedback message component that displays contextual feedback to users.
- * Supports different color variants (info, success, warning, critical) and a muted mode.
+ * Supports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.
  *
  * @usageNotes
  * ### Basic feedback message
  * ```html
- * <eds-feedback-message edsSuccess>
+ * <eds-feedback-message color="success">
  *   Operation completed successfully
  * </eds-feedback-message>
  * ```
  *
  * ### Muted variant (no icon)
  * ```html
- * <eds-feedback-message edsWarning isMuted>
+ * <eds-feedback-message color="warning" isMuted>
  *   This is a subtle warning message
  * </eds-feedback-message>
  * ```
  */
 class EdsFeedbackMessage {
     constructor() {
+        /**
+         * Semantic color of the feedback message.
+         * @default 'info'
+         */
+        this.color = input('info', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Controls whether the feedback message is displayed in a muted state.
          * When true, the status icon is hidden and the message has reduced visual prominence.
@@ -35,47 +39,29 @@ class EdsFeedbackMessage {
         /** Data attribute value for end-to-end testing identification. */
         this.e2eAttr = input('eds-feedback-message', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
-        this.colorDirective = inject(EdsColorDirective);
-        /** Resolved color variant name for passing to eds-icon-state. */
-        this.iconVariant = computed(() => this.colorDirective.resolvedColor() || 'info', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconVariant" }] : /* istanbul ignore next */ []));
-        this.hostClasses = computed(() => {
-            const colorClass = this.colorDirective.getCssClass('eds-feedback-message');
-            return [
-                'eds-feedback-message',
-                colorClass || 'eds-feedback-message--info',
-                this.isMuted() ? 'eds-feedback-message--muted' : '',
-            ]
-                .join(' ')
-                .trim();
+        /**
+         * Resolved color variant passed to eds-icon-state. The icon set only supports
+         * info / success / warning / critical, so primary and neutral fall back to info.
+         */
+        this.iconVariant = computed(() => {
+            const color = this.color();
+            return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "iconVariant" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFeedbackMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFeedbackMessage, isStandalone: true, selector: "eds-feedback-message", inputs: { isMuted: { classPropertyName: "isMuted", publicName: "isMuted", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "\"status\"", "attr.aria-live": "\"polite\"", "attr.data-e2e": "e2eAttr()" } }, hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsSuccess", "edsSuccess", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (!isMuted()) {\n    <eds-icon-state [color]=\"$any(iconVariant())\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [".eui-21 :host{--_color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}.eui-21 :host .content{color:var(--_color);display:block;position:relative;font:var(--eds-f-paragraph-s)}.eui-21 :host.eds-feedback-message--primary{--_color: var(--eds-c-foreground-primary)}.eui-21 :host.eds-feedback-message--neutral{--_color: var(--eds-c-foreground-neutral)}.eui-21 :host.eds-feedback-message--info{--_color: var(--eds-c-foreground-info)}.eui-21 :host.eds-feedback-message--success{--_color: var(--eds-c-foreground-success)}.eui-21 :host.eds-feedback-message--warning{--_color: var(--eds-c-foreground-warning)}.eui-21 :host.eds-feedback-message--critical{--_color: var(--eds-c-foreground-critical)}\n"], dependencies: [{ kind: "component", type: i2.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFeedbackMessage, isStandalone: true, selector: "eds-feedback-message", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMuted: { classPropertyName: "isMuted", publicName: "isMuted", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.color": "color()", "attr.muted": "isMuted() || null", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (!isMuted()) {\n    <eds-icon-state [color]=\"iconVariant()\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-paragraph-s)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFeedbackMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-feedback-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON_STATE], hostDirectives: [
-                        {
-                            directive: EdsColorDirective,
-                            inputs: [
-                                'edsPrimary',
-                                'edsNeutral',
-                                'edsInfo',
-                                'edsWarning',
-                                'edsSuccess',
-                                'edsCritical',
-                                'edsColorVariant',
-                            ],
-                        },
-                    ], host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.role]': '"status"',
-                        '[attr.aria-live]': '"polite"',
+            args: [{ selector: 'eds-feedback-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON_STATE], host: {
+                        '[attr.color]': 'color()',
+                        '[attr.muted]': 'isMuted() || null',
+                        role: 'status',
+                        'aria-live': 'polite',
                         '[attr.data-e2e]': 'e2eAttr()',
-                    }, template: "@if (!isMuted()) {\n    <eds-icon-state [color]=\"$any(iconVariant())\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [".eui-21 :host{--_color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}.eui-21 :host .content{color:var(--_color);display:block;position:relative;font:var(--eds-f-paragraph-s)}.eui-21 :host.eds-feedback-message--primary{--_color: var(--eds-c-foreground-primary)}.eui-21 :host.eds-feedback-message--neutral{--_color: var(--eds-c-foreground-neutral)}.eui-21 :host.eds-feedback-message--info{--_color: var(--eds-c-foreground-info)}.eui-21 :host.eds-feedback-message--success{--_color: var(--eds-c-foreground-success)}.eui-21 :host.eds-feedback-message--warning{--_color: var(--eds-c-foreground-warning)}.eui-21 :host.eds-feedback-message--critical{--_color: var(--eds-c-foreground-critical)}\n"] }]
-        }], propDecorators: { isMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMuted", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }] } });
+                    }, template: "@if (!isMuted()) {\n    <eds-icon-state [color]=\"iconVariant()\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-paragraph-s)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMuted", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }] } });
 
 /** Convenience array for importing all eds-feedback-message components. */
 const EDS_FEEDBACK_MESSAGE = [

package/fesm2022/eui-eds-eds-feedback-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-feedback-message.mjs","sources":["../../eds-feedback-message/eds-feedback-message.ts","../../eds-feedback-message/eds-feedback-message.html","../../eds-feedback-message/index.ts","../../eds-feedback-message/eui-eds-eds-feedback-message.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input } from '@angular/core';\nimport { EdsColorDirective } from '@eui/eds/shared';\nimport { EDS_ICON_STATE } from '@eui/eds/utilities/eds-icon-state';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (info, success, warning, critical) and a muted mode.\n *\n * @usageNotes\n * ### Basic feedback message\n * ```html\n * <eds-feedback-message edsSuccess>\n *   Operation completed successfully\n * </eds-feedback-message>\n * ```\n *\n * ### Muted variant (no icon)\n * ```html\n * <eds-feedback-message edsWarning isMuted>\n *   This is a subtle warning message\n * </eds-feedback-message>\n * ```\n */\n@Component({\n    selector: 'eds-feedback-message',\n    templateUrl: './eds-feedback-message.html',\n    styleUrl: './eds-feedback-message.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    hostDirectives: [\n        {\n            directive: EdsColorDirective,\n            inputs: [\n                'edsPrimary',\n                'edsNeutral',\n                'edsInfo',\n                'edsWarning',\n                'edsSuccess',\n                'edsCritical',\n                'edsColorVariant',\n            ],\n        },\n    ],\n    host: {\n        '[class]': 'hostClasses()',\n        '[attr.role]': '\"status\"',\n        '[attr.aria-live]': '\"polite\"',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsFeedbackMessage {\n    /**\n     * Controls whether the feedback message is displayed in a muted state.\n     * When true, the status icon is hidden and the message has reduced visual prominence.\n     * @default false\n     */\n    readonly isMuted = input(false, { transform: booleanAttribute });\n\n    /** Data attribute value for end-to-end testing identification. */\n    readonly e2eAttr = input('eds-feedback-message');\n\n    protected colorDirective = inject(EdsColorDirective);\n\n    /** Resolved color variant name for passing to eds-icon-state. */\n    protected iconVariant = computed(() => this.colorDirective.resolvedColor() || 'info');\n\n    hostClasses = computed(() => {\n        const colorClass = this.colorDirective.getCssClass('eds-feedback-message');\n        return [\n            'eds-feedback-message',\n            colorClass || 'eds-feedback-message--info',\n            this.isMuted() ? 'eds-feedback-message--muted' : '',\n        ]\n            .join(' ')\n            .trim();\n    });\n}\n","@if (!isMuted()) {\n    <eds-icon-state [color]=\"$any(iconVariant())\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n","import { EdsFeedbackMessage } from './eds-feedback-message';\n\nexport { EdsFeedbackMessage };\n\n/** Convenience array for importing all eds-feedback-message components. */\nexport const EDS_FEEDBACK_MESSAGE = [\n    EdsFeedbackMessage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MA4BU,kBAAkB,CAAA;AA3B/B,IAAA,WAAA,GAAA;AA4BI;;;;AAIG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAGvD,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,sBAAsB;oFAAC;AAEtC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;;AAG1C,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,IAAI,MAAM;wFAAC;AAErF,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;YACxB,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,sBAAsB,CAAC;YAC1E,OAAO;gBACH,sBAAsB;AACtB,gBAAA,UAAU,IAAI,4BAA4B;gBAC1C,IAAI,CAAC,OAAO,EAAE,GAAG,6BAA6B,GAAG,EAAE;AACtD;iBACI,IAAI,CAAC,GAAG;AACR,iBAAA,IAAI,EAAE;QACf,CAAC;wFAAC;AACL,IAAA;8GA1BY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,gvBClD/B,8KAMA,EAAA,MAAA,EAAA,CAAA,0uBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FD4Ca,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA3B9B,SAAS;+BACI,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,WACtC,CAAC,GAAG,cAAc,CAAC,EAAA,cAAA,EACZ;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,iBAAiB;AAC5B,4BAAA,MAAM,EAAE;gCACJ,YAAY;gCACZ,YAAY;gCACZ,SAAS;gCACT,YAAY;gCACZ,YAAY;gCACZ,aAAa;gCACb,iBAAiB;AACpB,6BAAA;AACJ,yBAAA;qBACJ,EAAA,IAAA,EACK;AACF,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,aAAa,EAAE,UAAU;AACzB,wBAAA,kBAAkB,EAAE,UAAU;AAC9B,wBAAA,iBAAiB,EAAE,WAAW;AACjC,qBAAA,EAAA,QAAA,EAAA,8KAAA,EAAA,MAAA,EAAA,CAAA,0uBAAA,CAAA,EAAA;;;AE5CL;AACO,MAAM,oBAAoB,GAAG;IAChC,kBAAkB;;;ACNtB;;AAEG;;;;"}
+{"version":3,"file":"eui-eds-eds-feedback-message.mjs","sources":["../../eds-feedback-message/eds-feedback-message.ts","../../eds-feedback-message/eds-feedback-message.html","../../eds-feedback-message/index.ts","../../eds-feedback-message/eui-eds-eds-feedback-message.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { EDS_ICON_STATE, EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the feedback message's variant contract. No shared-token import.\n */\nexport type EdsFeedbackMessageColor = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.\n *\n * @usageNotes\n * ### Basic feedback message\n * ```html\n * <eds-feedback-message color=\"success\">\n *   Operation completed successfully\n * </eds-feedback-message>\n * ```\n *\n * ### Muted variant (no icon)\n * ```html\n * <eds-feedback-message color=\"warning\" isMuted>\n *   This is a subtle warning message\n * </eds-feedback-message>\n * ```\n */\n@Component({\n    selector: 'eds-feedback-message',\n    templateUrl: './eds-feedback-message.html',\n    styleUrl: './eds-feedback-message.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        '[attr.color]': 'color()',\n        '[attr.muted]': 'isMuted() || null',\n        role: 'status',\n        'aria-live': 'polite',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsFeedbackMessage {\n    /**\n     * Semantic color of the feedback message.\n     * @default 'info'\n     */\n    readonly color = input<EdsFeedbackMessageColor>('info');\n\n    /**\n     * Controls whether the feedback message is displayed in a muted state.\n     * When true, the status icon is hidden and the message has reduced visual prominence.\n     * @default false\n     */\n    readonly isMuted = input(false, { transform: booleanAttribute });\n\n    /** Data attribute value for end-to-end testing identification. */\n    readonly e2eAttr = input('eds-feedback-message');\n\n    /**\n     * Resolved color variant passed to eds-icon-state. The icon set only supports\n     * info / success / warning / critical, so primary and neutral fall back to info.\n     */\n    protected readonly iconVariant = computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';\n    });\n}\n","@if (!isMuted()) {\n    <eds-icon-state [color]=\"iconVariant()\" size=\"s\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n    <ng-content />\n</div>\n","import { EdsFeedbackMessage, EdsFeedbackMessageColor } from './eds-feedback-message';\n\nexport { EdsFeedbackMessage, EdsFeedbackMessageColor };\n\n/** Convenience array for importing all eds-feedback-message components. */\nexport const EDS_FEEDBACK_MESSAGE = [\n    EdsFeedbackMessage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;;;;AAkBG;MAeU,kBAAkB,CAAA;AAd/B,IAAA,WAAA,GAAA;AAeI;;;AAGG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAA0B,MAAM;kFAAC;AAEvD;;;;AAIG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAGvD,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,sBAAsB;oFAAC;AAEhD;;;AAGG;AACgB,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAoB,MAAK;AAC9D,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,YAAA,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM;QAC9F,CAAC;wFAAC;AACL,IAAA;8GAzBY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,6nBCzC/B,wKAMA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDmCa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAd9B,SAAS;+BACI,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,WACtC,CAAC,GAAG,cAAc,CAAC,EAAA,IAAA,EACtB;AACF,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,cAAc,EAAE,mBAAmB;AACnC,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,iBAAiB,EAAE,WAAW;AACjC,qBAAA,EAAA,QAAA,EAAA,wKAAA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA;;;AEnCL;AACO,MAAM,oBAAoB,GAAG;IAChC,kBAAkB;;;ACNtB;;AAEG;;;;"}

package/fesm2022/eui-eds-eds-file-upload.mjs

@@ -478,7 +478,7 @@ class EdsFileUpload {
                 useExisting: EdsFileUpload,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputs", predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDragArea()) {\n    <div\n        class=\"eds-file-upload__drop-area\"\n        [class.eds-file-upload__drop-area--active]=\"dragEntered()\"\n        [class.eds-file-upload__drop-area--disabled]=\"isDropAreaDisabled()\">\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" class=\"eds-file-upload__browse-btn\">{{ browseLabel() }}</button>\n        <span class=\"eds-file-upload__drag-hint\">{{ dragLabel() }}</span>\n        <input\n            #input\n            class=\"eds-file-upload__file-input\"\n            [attr.aria-label]=\"browseLabel() + ' ' + dragLabel()\"\n            type=\"file\"\n            [accept]=\"accept()\"\n            [attr.disabled]=\"isDropAreaDisabled() ? 'disabled' : null\"\n            [multiple]=\"isMultiple()\"\n            (dragenter)=\"onDragEnter()\"\n            (dragleave)=\"onDragLeave()\" />\n    </div>\n} @else {\n    <div class=\"eds-file-upload__simple-input\">\n        <label [attr.for]=\"'eds-file-' + randomNumberId\">\n            <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"openBrowseWindow()\">{{ browseLabel() }}</button>\n        </label>\n        @if (isMultiple()) {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose multiple files'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\"\n                multiple />\n        } @else {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose a single file'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\" />\n        }\n    </div>\n}\n\n@if (hasProgressBar() && internalProgress() > 0) {\n    <eds-progress-bar\n        class=\"eds-file-upload__progress\"\n        [progress]=\"internalProgress()\"\n        [label]=\"internalProgress() + '%'\" />\n}\n\n@if (rejectedFileMessage()) {\n    <eds-feedback-message edsCritical class=\"eds-file-upload__error\">\n        {{ rejectedFileLabel() }}: {{ rejectedFileMessage() }}\n    </eds-feedback-message>\n}\n\n@for (uploadedFile of internalUploadedFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"uploadedFile\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromUploadedList($event)\" />\n}\n\n@for (file of internalFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        isFileObject\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"file\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromList($event)\" />\n}\n\n@if (filesTotalSize() && hasTotalSizeDisplayed()) {\n    <div class=\"eds-file-upload__total-size\">\n        {{ filesTotalSize() | edsFilesize }} {{ totalSizeLabel() }}\n    </div>\n}\n\n<div class=\"eds-u-flex eds-u-flex-gap-s\">\n    <ng-content />\n    \n    @if (showResetBtn()) {\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"resetList()\">\n            {{ resetLabel() }}\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-file-upload__drop-area{outline:1px dashed var(--eds-c-border-primary);border-radius:var(--eds-br-m);padding:var(--eds-sp-xl);position:relative;transition:background-color .2s ease,outline-width .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__drop-area--active{background-color:var(--eds-c-surface-elevation);outline-width:3px}.eui-21 :host .eds-file-upload__drop-area--disabled{opacity:.5;cursor:not-allowed}.eui-21 :host .eds-file-upload__drop-area--disabled .eds-file-upload__file-input{cursor:default}.eui-21 :host .eds-file-upload__drag-hint{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-21 :host .eds-file-upload__file-input:not(:disabled){cursor:pointer}.eui-21 :host .eds-file-upload__simple-input{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__simple-input .eds-file-upload__hidden-input{display:none}.eui-21 :host .eds-file-upload__progress{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__error{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__total-size{margin-top:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs);font:var(--eds-f-label-m-semibold)}.eui-21 :host .eds-file-upload__reset-btn{margin-top:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "component", type: i1$1.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "edsDisabled", "edsBlockButton", "edsIconButton", "edsAvatarButton", "edsLineWrap", "edsButtonPrimary", "edsButtonSecondary", "edsButtonTertiary", "edsButtonRounded", "edsTypeVariant", "isChecked"] }, { kind: "component", type: i2$1.EdsFeedbackMessage, selector: "eds-feedback-message", inputs: ["isMuted", "e2eAttr"] }, { kind: "component", type: i3.EdsProgressBar, selector: "eds-progress-bar", inputs: ["label", "valueText", "progress", "isIndeterminate", "hasStatusIcon", "color"] }, { kind: "component", type: EdsFileUploadPreview, selector: "eds-file-upload-preview", inputs: ["file", "index", "uploadedFileTemplate", "hasPreview", "hasPreviewAsImage", "hasPreviewAsIcon", "isItemsClickable", "isFileObject", "isFilenameDisplayed", "isFilesizeDisplayed", "isFiletypeDisplayed"], outputs: ["removeFromList", "itemClick"] }, { kind: "pipe", type: EdsFilesizePipe, name: "edsFilesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "fileInputs", predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDragArea()) {\n    <div\n        class=\"eds-file-upload__drop-area\"\n        [class.eds-file-upload__drop-area--active]=\"dragEntered()\"\n        [class.eds-file-upload__drop-area--disabled]=\"isDropAreaDisabled()\">\n        <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" class=\"eds-file-upload__browse-btn\">{{ browseLabel() }}</button>\n        <span class=\"eds-file-upload__drag-hint\">{{ dragLabel() }}</span>\n        <input\n            #input\n            class=\"eds-file-upload__file-input\"\n            [attr.aria-label]=\"browseLabel() + ' ' + dragLabel()\"\n            type=\"file\"\n            [accept]=\"accept()\"\n            [attr.disabled]=\"isDropAreaDisabled() ? 'disabled' : null\"\n            [multiple]=\"isMultiple()\"\n            (dragenter)=\"onDragEnter()\"\n            (dragleave)=\"onDragLeave()\" />\n    </div>\n} @else {\n    <div class=\"eds-file-upload__simple-input\">\n        <label [attr.for]=\"'eds-file-' + randomNumberId\">\n            <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" (click)=\"openBrowseWindow()\">{{ browseLabel() }}</button>\n        </label>\n        @if (isMultiple()) {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose multiple files'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\"\n                multiple />\n        } @else {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose a single file'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\" />\n        }\n    </div>\n}\n\n@if (hasProgressBar() && internalProgress() > 0) {\n    <eds-progress-bar\n        class=\"eds-file-upload__progress\"\n        [progress]=\"internalProgress()\"\n        [label]=\"internalProgress() + '%'\" />\n}\n\n@if (rejectedFileMessage()) {\n    <eds-feedback-message edsCritical class=\"eds-file-upload__error\">\n        {{ rejectedFileLabel() }}: {{ rejectedFileMessage() }}\n    </eds-feedback-message>\n}\n\n@for (uploadedFile of internalUploadedFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"uploadedFile\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromUploadedList($event)\" />\n}\n\n@for (file of internalFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        isFileObject\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"file\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromList($event)\" />\n}\n\n@if (filesTotalSize() && hasTotalSizeDisplayed()) {\n    <div class=\"eds-file-upload__total-size\">\n        {{ filesTotalSize() | edsFilesize }} {{ totalSizeLabel() }}\n    </div>\n}\n\n<div class=\"eds-u-flex eds-u-flex-gap-s\">\n    <ng-content />\n    \n    @if (showResetBtn()) {\n        <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" (click)=\"resetList()\">\n            {{ resetLabel() }}\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-file-upload__drop-area{outline:1px dashed var(--eds-c-border-primary);border-radius:var(--eds-br-m);padding:var(--eds-sp-xl);position:relative;transition:background-color .2s ease,outline-width .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__drop-area--active{background-color:var(--eds-c-surface-elevation);outline-width:3px}.eui-21 :host .eds-file-upload__drop-area--disabled{opacity:.5;cursor:not-allowed}.eui-21 :host .eds-file-upload__drop-area--disabled .eds-file-upload__file-input{cursor:default}.eui-21 :host .eds-file-upload__drag-hint{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-21 :host .eds-file-upload__file-input:not(:disabled){cursor:pointer}.eui-21 :host .eds-file-upload__simple-input{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__simple-input .eds-file-upload__hidden-input{display:none}.eui-21 :host .eds-file-upload__progress{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__error{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__total-size{margin-top:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs);font:var(--eds-f-label-m-semibold)}.eui-21 :host .eds-file-upload__reset-btn{margin-top:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "component", type: i1$1.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "block", "iconButton", "avatarButton", "lineWrap", "rounded", "isChecked"] }, { kind: "component", type: i2$1.EdsFeedbackMessage, selector: "eds-feedback-message", inputs: ["color", "isMuted", "e2eAttr"] }, { kind: "component", type: i3.EdsProgressBar, selector: "eds-progress-bar", inputs: ["label", "valueText", "progress", "isIndeterminate", "hasStatusIcon", "color"] }, { kind: "component", type: EdsFileUploadPreview, selector: "eds-file-upload-preview", inputs: ["file", "index", "uploadedFileTemplate", "hasPreview", "hasPreviewAsImage", "hasPreviewAsIcon", "isItemsClickable", "isFileObject", "isFilenameDisplayed", "isFilesizeDisplayed", "isFiletypeDisplayed"], outputs: ["removeFromList", "itemClick"] }, { kind: "pipe", type: EdsFilesizePipe, name: "edsFilesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUpload, decorators: [{
             type: Component,
@@ -498,7 +498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     ], host: {
                         '[class]': 'hostClasses()',
                         '[attr.data-e2e]': 'e2eAttr()',
-                    }, template: "@if (hasDragArea()) {\n    <div\n        class=\"eds-file-upload__drop-area\"\n        [class.eds-file-upload__drop-area--active]=\"dragEntered()\"\n        [class.eds-file-upload__drop-area--disabled]=\"isDropAreaDisabled()\">\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" class=\"eds-file-upload__browse-btn\">{{ browseLabel() }}</button>\n        <span class=\"eds-file-upload__drag-hint\">{{ dragLabel() }}</span>\n        <input\n            #input\n            class=\"eds-file-upload__file-input\"\n            [attr.aria-label]=\"browseLabel() + ' ' + dragLabel()\"\n            type=\"file\"\n            [accept]=\"accept()\"\n            [attr.disabled]=\"isDropAreaDisabled() ? 'disabled' : null\"\n            [multiple]=\"isMultiple()\"\n            (dragenter)=\"onDragEnter()\"\n            (dragleave)=\"onDragLeave()\" />\n    </div>\n} @else {\n    <div class=\"eds-file-upload__simple-input\">\n        <label [attr.for]=\"'eds-file-' + randomNumberId\">\n            <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"openBrowseWindow()\">{{ browseLabel() }}</button>\n        </label>\n        @if (isMultiple()) {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose multiple files'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\"\n                multiple />\n        } @else {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose a single file'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\" />\n        }\n    </div>\n}\n\n@if (hasProgressBar() && internalProgress() > 0) {\n    <eds-progress-bar\n        class=\"eds-file-upload__progress\"\n        [progress]=\"internalProgress()\"\n        [label]=\"internalProgress() + '%'\" />\n}\n\n@if (rejectedFileMessage()) {\n    <eds-feedback-message edsCritical class=\"eds-file-upload__error\">\n        {{ rejectedFileLabel() }}: {{ rejectedFileMessage() }}\n    </eds-feedback-message>\n}\n\n@for (uploadedFile of internalUploadedFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"uploadedFile\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromUploadedList($event)\" />\n}\n\n@for (file of internalFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        isFileObject\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"file\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromList($event)\" />\n}\n\n@if (filesTotalSize() && hasTotalSizeDisplayed()) {\n    <div class=\"eds-file-upload__total-size\">\n        {{ filesTotalSize() | edsFilesize }} {{ totalSizeLabel() }}\n    </div>\n}\n\n<div class=\"eds-u-flex eds-u-flex-gap-s\">\n    <ng-content />\n    \n    @if (showResetBtn()) {\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"resetList()\">\n            {{ resetLabel() }}\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-file-upload__drop-area{outline:1px dashed var(--eds-c-border-primary);border-radius:var(--eds-br-m);padding:var(--eds-sp-xl);position:relative;transition:background-color .2s ease,outline-width .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__drop-area--active{background-color:var(--eds-c-surface-elevation);outline-width:3px}.eui-21 :host .eds-file-upload__drop-area--disabled{opacity:.5;cursor:not-allowed}.eui-21 :host .eds-file-upload__drop-area--disabled .eds-file-upload__file-input{cursor:default}.eui-21 :host .eds-file-upload__drag-hint{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-21 :host .eds-file-upload__file-input:not(:disabled){cursor:pointer}.eui-21 :host .eds-file-upload__simple-input{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__simple-input .eds-file-upload__hidden-input{display:none}.eui-21 :host .eds-file-upload__progress{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__error{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__total-size{margin-top:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs);font:var(--eds-f-label-m-semibold)}.eui-21 :host .eds-file-upload__reset-btn{margin-top:var(--eds-sp-xs)}\n"] }]
+                    }, template: "@if (hasDragArea()) {\n    <div\n        class=\"eds-file-upload__drop-area\"\n        [class.eds-file-upload__drop-area--active]=\"dragEntered()\"\n        [class.eds-file-upload__drop-area--disabled]=\"isDropAreaDisabled()\">\n        <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" class=\"eds-file-upload__browse-btn\">{{ browseLabel() }}</button>\n        <span class=\"eds-file-upload__drag-hint\">{{ dragLabel() }}</span>\n        <input\n            #input\n            class=\"eds-file-upload__file-input\"\n            [attr.aria-label]=\"browseLabel() + ' ' + dragLabel()\"\n            type=\"file\"\n            [accept]=\"accept()\"\n            [attr.disabled]=\"isDropAreaDisabled() ? 'disabled' : null\"\n            [multiple]=\"isMultiple()\"\n            (dragenter)=\"onDragEnter()\"\n            (dragleave)=\"onDragLeave()\" />\n    </div>\n} @else {\n    <div class=\"eds-file-upload__simple-input\">\n        <label [attr.for]=\"'eds-file-' + randomNumberId\">\n            <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" (click)=\"openBrowseWindow()\">{{ browseLabel() }}</button>\n        </label>\n        @if (isMultiple()) {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose multiple files'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\"\n                multiple />\n        } @else {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose a single file'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\" />\n        }\n    </div>\n}\n\n@if (hasProgressBar() && internalProgress() > 0) {\n    <eds-progress-bar\n        class=\"eds-file-upload__progress\"\n        [progress]=\"internalProgress()\"\n        [label]=\"internalProgress() + '%'\" />\n}\n\n@if (rejectedFileMessage()) {\n    <eds-feedback-message edsCritical class=\"eds-file-upload__error\">\n        {{ rejectedFileLabel() }}: {{ rejectedFileMessage() }}\n    </eds-feedback-message>\n}\n\n@for (uploadedFile of internalUploadedFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"uploadedFile\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromUploadedList($event)\" />\n}\n\n@for (file of internalFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        isFileObject\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"file\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromList($event)\" />\n}\n\n@if (filesTotalSize() && hasTotalSizeDisplayed()) {\n    <div class=\"eds-file-upload__total-size\">\n        {{ filesTotalSize() | edsFilesize }} {{ totalSizeLabel() }}\n    </div>\n}\n\n<div class=\"eds-u-flex eds-u-flex-gap-s\">\n    <ng-content />\n    \n    @if (showResetBtn()) {\n        <button edsButton variant=\"secondary\" size=\"s\" type=\"button\" (click)=\"resetList()\">\n            {{ resetLabel() }}\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-file-upload__drop-area{outline:1px dashed var(--eds-c-border-primary);border-radius:var(--eds-br-m);padding:var(--eds-sp-xl);position:relative;transition:background-color .2s ease,outline-width .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__drop-area--active{background-color:var(--eds-c-surface-elevation);outline-width:3px}.eui-21 :host .eds-file-upload__drop-area--disabled{opacity:.5;cursor:not-allowed}.eui-21 :host .eds-file-upload__drop-area--disabled .eds-file-upload__file-input{cursor:default}.eui-21 :host .eds-file-upload__drag-hint{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-21 :host .eds-file-upload__file-input:not(:disabled){cursor:pointer}.eui-21 :host .eds-file-upload__simple-input{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__simple-input .eds-file-upload__hidden-input{display:none}.eui-21 :host .eds-file-upload__progress{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__error{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__total-size{margin-top:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs);font:var(--eds-f-label-m-semibold)}.eui-21 :host .eds-file-upload__reset-btn{margin-top:var(--eds-sp-xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], hasProgressBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProgressBar", required: false }] }], hasPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreview", required: false }] }], hasPreviewAsImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreviewAsImage", required: false }] }], hasPreviewAsIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreviewAsIcon", required: false }] }], hasTotalSizeDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTotalSizeDisplayed", required: false }] }], hasResetButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasResetButton", required: false }] }], hasDragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDragArea", required: false }] }], isItemsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemsClickable", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], dragLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], totalSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalSizeLabel", required: false }] }], rejectedFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedFileLabel", required: false }] }], fileDrop: [{ type: i0.Output, args: ["fileDrop"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], fileInputs: [{ type: i0.ViewChildren, args: ['input', { isSignal: true }] }], emitFiles: [{
                 type: HostListener,
                 args: ['change', ['$any($event.target).files']]