@tedi-design-system/angular 8.0.1-rc.7 → 8.1.0-rc.1

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -18379,6 +18379,28 @@ class ProgressBarComponent {
      * Accessible label for the progress bar. Falls back to `label()` when omitted.
      */
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * Publishes changes to the formatted value (`valueLabel`, or the percentage)
+     * in a visually hidden live region, independently of `showValue`.
+     * The current value is skipped when announcements are enabled.
+     *
+     * Progress bars are not live regions by default. Enable announcements when
+     * users need updates without navigating back to the bar. Use `polite` for
+     * routine updates and `assertive` for urgent updates that may interrupt speech.
+     * @default off
+     */
+    announce = input("off", ...(ngDevMode ? [{ debugName: "announce" }] : []));
+    /**
+     * Minimum time in milliseconds between live-region updates. The first change
+     * is published immediately; changes during the interval are combined into one
+     * update with the latest value. Changing the interval reschedules pending updates.
+     * Zero disables throttling. Negative values become zero; non-finite values use 1000ms.
+     * Ignored when `announce` is `off`.
+     * @default 1000
+     */
+    announceInterval = input(1000, ...(ngDevMode ? [{ debugName: "announceInterval", transform: (value) => Number.isFinite(value) ? Math.max(0, value) : 1000 }] : [{
+            transform: (value) => Number.isFinite(value) ? Math.max(0, value) : 1000,
+        }]));
     /*
      * Per-breakpoint overrides (`xs`–`xxl`).
      *
@@ -18440,8 +18462,60 @@ class ProgressBarComponent {
     }), ...(ngDevMode ? [{ debugName: "currentProps" }] : []));
     formattedValue = computed(() => this.currentProps().valueLabel ?? `${this.value()}%`, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
     accessibleLabel = computed(() => this.ariaLabel() ?? this.label() ?? undefined, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
+    announcedValue = signal("", ...(ngDevMode ? [{ debugName: "announcedValue" }] : []));
+    announceRole = computed(() => this.announce() === "assertive" ? "alert" : "status", ...(ngDevMode ? [{ debugName: "announceRole" }] : []));
+    lastAnnouncedAt;
+    announceTimeout;
+    previousAnnounceText;
+    constructor() {
+        effect(() => {
+            const mode = this.announce();
+            const text = this.formattedValue();
+            const interval = this.announceInterval();
+            untracked(() => {
+                if (mode === "off") {
+                    this.resetAnnouncement();
+                }
+                else if (this.previousAnnounceText === undefined) {
+                    this.previousAnnounceText = text;
+                }
+                else {
+                    const changed = text !== this.previousAnnounceText;
+                    this.previousAnnounceText = text;
+                    if (changed || this.announceTimeout !== undefined) {
+                        this.queueAnnouncement(text, interval);
+                    }
+                }
+            });
+        });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.announceTimeout));
+    }
+    queueAnnouncement(text, interval) {
+        const remaining = this.lastAnnouncedAt === undefined
+            ? 0
+            : interval - (Date.now() - this.lastAnnouncedAt);
+        if (remaining <= 0) {
+            this.announceNow(text);
+            return;
+        }
+        clearTimeout(this.announceTimeout);
+        this.announceTimeout = setTimeout(() => this.announceNow(this.formattedValue()), remaining);
+    }
+    announceNow(text) {
+        clearTimeout(this.announceTimeout);
+        this.announceTimeout = undefined;
+        this.lastAnnouncedAt = Date.now();
+        this.announcedValue.set(text);
+    }
+    resetAnnouncement() {
+        clearTimeout(this.announceTimeout);
+        this.announceTimeout = undefined;
+        this.lastAnnouncedAt = undefined;
+        this.previousAnnounceText = undefined;
+        this.announcedValue.set("");
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [attr.for]=\"resolvedId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [attr.for]=\"resolvedId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [attr.id]=\"resolvedId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (\n        currentProps().showValue &&\n        currentProps().valuePosition === \"horizontal\"\n      ) {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (\n        currentProps().showValue && currentProps().valuePosition === \"bottom\"\n      ) {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, announce: { classPropertyName: "announce", publicName: "announce", isSignal: true, isRequired: false, transformFunction: null }, announceInterval: { classPropertyName: "announceInterval", publicName: "announceInterval", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [attr.for]=\"resolvedId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [attr.for]=\"resolvedId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [attr.id]=\"resolvedId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (\n        currentProps().showValue &&\n        currentProps().valuePosition === \"horizontal\"\n      ) {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (\n        currentProps().showValue && currentProps().valuePosition === \"bottom\"\n      ) {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n\n@if (announce() !== \"off\") {\n  <span\n    class=\"sr-only\"\n    [attr.role]=\"announceRole()\"\n    [attr.aria-live]=\"announce()\"\n    aria-atomic=\"true\"\n  >\n    {{ announcedValue() }}\n  </span>\n}\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -18450,8 +18524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-progress-bar--small]": "currentProps().size === 'small'",
                         "[class.tedi-progress-bar--label-horizontal]": "label() && currentProps().labelPosition === 'horizontal'",
                         "[class.tedi-progress-bar--value-bottom]": "currentProps().valuePosition === 'bottom'",
-                    }, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [attr.for]=\"resolvedId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [attr.for]=\"resolvedId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [attr.id]=\"resolvedId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (\n        currentProps().showValue &&\n        currentProps().valuePosition === \"horizontal\"\n      ) {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (\n        currentProps().showValue && currentProps().valuePosition === \"bottom\"\n      ) {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
-        }], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+                    }, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [attr.for]=\"resolvedId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [attr.for]=\"resolvedId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [attr.id]=\"resolvedId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (\n        currentProps().showValue &&\n        currentProps().valuePosition === \"horizontal\"\n      ) {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (\n        currentProps().showValue && currentProps().valuePosition === \"bottom\"\n      ) {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n\n@if (announce() !== \"off\") {\n  <span\n    class=\"sr-only\"\n    [attr.role]=\"announceRole()\"\n    [attr.aria-live]=\"announce()\"\n    aria-atomic=\"true\"\n  >\n    {{ announcedValue() }}\n  </span>\n}\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], announce: [{ type: i0.Input, args: [{ isSignal: true, alias: "announce", required: false }] }], announceInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceInterval", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
 
 class AttachmentComponent {
     projectedProgress = contentChild(ProgressBarComponent, ...(ngDevMode ? [{ debugName: "projectedProgress" }] : []));