TEDI Release 26.02.2026

CHANGELOG.md

@@ -1,3 +1,32 @@
+# [6.1.0-rc.3](https://github.com/TEDI-Design-System/angular/compare/angular-6.1.0-rc.2...angular-6.1.0-rc.3) (2026-02-12)
+
+
+### Features
+
+* **progress-bar:** Add community progress bar [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([b22be12](https://github.com/TEDI-Design-System/angular/commit/b22be1234eeab7bea67172bc4b9e3084af21a835))
+* **progress-bar:** add progress bar exports [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([e6bc4bf](https://github.com/TEDI-Design-System/angular/commit/e6bc4bfb25456882e98673bc6af7499a1faffdec))
+
+# [6.1.0-rc.2](https://github.com/TEDI-Design-System/angular/compare/angular-6.1.0-rc.1...angular-6.1.0-rc.2) (2026-02-03)
+
+
+### Bug Fixes
+
+* **datepicker:** displayed value not changing on external update [#322](https://github.com/TEDI-Design-System/angular/issues/322) ([#323](https://github.com/TEDI-Design-System/angular/issues/323)) ([adfb6c1](https://github.com/TEDI-Design-System/angular/commit/adfb6c12e4855af1a4724de9e08f9fd8dbc4b835))
+
+# [6.1.0-rc.1](https://github.com/TEDI-Design-System/angular/compare/angular-6.0.1-rc.1...angular-6.1.0-rc.1) (2026-02-03)
+
+
+### Features
+
+* **progress-bar:** Add community progress bar [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([#321](https://github.com/TEDI-Design-System/angular/issues/321)) ([3b75325](https://github.com/TEDI-Design-System/angular/commit/3b7532584d3f480b9e429d5db0fb11196d32abbc))
+
+## [6.0.1-rc.1](https://github.com/TEDI-Design-System/angular/compare/angular-6.0.0...angular-6.0.1-rc.1) (2026-01-29)
+
+
+### Bug Fixes
+
+* **vertical-stepper:** add missing export [#254](https://github.com/TEDI-Design-System/angular/issues/254) ([#309](https://github.com/TEDI-Design-System/angular/issues/309)) ([5355844](https://github.com/TEDI-Design-System/angular/commit/53558446861cf960f94918ac4cec5113019b2982))
+
 # [6.0.0](https://github.com/TEDI-Design-System/angular/compare/angular-5.0.0...angular-6.0.0) (2026-01-29)
 
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TEDI Design System
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

community/components/helpers/index.ts

@@ -0,0 +1 @@
+export * from "./progress-bar";

community/components/helpers/progress-bar/index.ts

@@ -0,0 +1 @@
+export * from "./progress-bar.component";

community/components/helpers/progress-bar/progress-bar.component.html

@@ -0,0 +1,20 @@
+<progress
+  class="tedi-progress__bar"
+  [id]="progressId()"
+  [max]="100"
+  [value]="value()"
+  [attr.aria-describedby]="feedbackTextId()"
+></progress>
+
+<span tedi-label size="small" class="tedi-progress__indicator"
+  >{{ value() }}%</span
+>
+
+@if (feedbackText(); as feedback) {
+  <tedi-feedback-text
+    [attr.id]="feedbackTextId()"
+    [text]="feedback.text"
+    [type]="feedback.type"
+    [position]="feedback.position"
+  />
+}

community/components/helpers/progress-bar/progress-bar.component.scss

@@ -0,0 +1,56 @@
+@use "@tedi-design-system/core/bootstrap-utility/breakpoints";
+
+.tedi-progress {
+  --_bar-height: var(--progress-bar-height, 8px);
+  --_bar-radius: var(--progress-bar-radius, 4px);
+  --_bar-background: var(--progress-bar-background-passive, #f9f9f9);
+  --_bar-border: var(--progress-bar-border-default, #838494);
+  --_progress-background: var(--progress-bar-background-active, #005aa3);
+
+  display: grid;
+  grid-template-areas: "bar bar" ". indicator";
+  grid-template-rows: 24px;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--layout-grid-gutters-08, 8px);
+
+  &__bar {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    grid-area: bar;
+    height: var(--_bar-height);
+    border-radius: var(--_bar-radius);
+    border: 1px solid var(--_bar-border);
+    width: 100%;
+    align-self: center;
+
+    &::-webkit-progress-bar {
+      background: var(--_bar-background);
+      border-radius: var(--_bar-radius);
+    }
+
+    &::-webkit-progress-value {
+      background: var(--_progress-background);
+      border-radius: var(--_bar-radius);
+    }
+
+    &::-moz-progress-bar {
+      background: var(--_progress-background);
+      border-radius: var(--_bar-radius);
+    }
+  }
+
+  &__indicator {
+    grid-area: indicator;
+  }
+
+  &--small {
+    --_bar-height: var(--progress-bar-height-sm, 4px);
+  }
+
+  &--horizontal {
+    @include breakpoints.media-breakpoint-up(sm) {
+      grid-template-areas: "bar indicator";
+    }
+  }
+}

community/components/helpers/progress-bar/progress-bar.component.ts

@@ -0,0 +1,30 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { ComponentInputs, FeedbackTextComponent, generateUUID, LabelComponent } from "@tedi-design-system/angular/tedi";
+
+@Component({
+  selector: "tedi-progress-bar",
+  imports: [FeedbackTextComponent, LabelComponent],
+  templateUrl: "./progress-bar.component.html",
+  styleUrl: "./progress-bar.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    "[class.tedi-progress]": "true",
+    "[class.tedi-progress--small]": "small()",
+    "[class.tedi-progress--horizontal]": "direction() === 'horizontal'",
+  },
+})
+export class ProgressBarComponent {
+  progressId = input<string>();
+  value = input<number>(0);
+  direction = input<'horizontal' | 'vertical'>("horizontal");
+  small = input(false, { transform: booleanAttribute });
+  feedbackText = input<ComponentInputs<FeedbackTextComponent>>();
+
+  feedbackTextId = computed(() => {
+    if (this.feedbackText()) {
+      return generateUUID();
+    }
+    return;
+  });
+}

community/components/helpers/progress-bar/progress-bar.stories.ts

@@ -0,0 +1,86 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+import { ProgressBarComponent } from "./progress-bar.component";
+
+export default {
+  title: "Community/Helpers/ProgressBar",
+  component: ProgressBarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ProgressBarComponent],
+    }),
+  ],
+  argTypes: {
+    progressId: {
+      description:
+        "Optional id for the progress element to bind with label etc.",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    value: {
+      description: "Progress value between 0 and 100",
+      control: { type: "number", min: 0, max: 100, step: 1 },
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "0" },
+      },
+    },
+    direction: {
+      description: "Orientation of the progress bar",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: {
+        type: { summary: "'horizontal' | 'vertical'" },
+        defaultValue: { summary: "horizontal" },
+      },
+    },
+    small: {
+      description: "Whether it's the small variant",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    feedbackText: {
+      description:
+        "Optional feedback text displayed alongside the progress bar. Accepts `FeedbackTextComponent` inputs.",
+      control: "object",
+      table: {
+        type: { summary: "ComponentInputs<FeedbackTextComponent>" },
+      },
+    },
+  },
+} as Meta<ProgressBarComponent>;
+
+export const Default: StoryObj<ProgressBarComponent> = {
+  args: {
+    value: 50,
+    direction: "horizontal",
+    small: false,
+  },
+};
+
+export const Small: StoryObj<ProgressBarComponent> = {
+  args: {
+    value: 50,
+    direction: "horizontal",
+    small: true,
+  },
+};
+
+export const WithFeedback: StoryObj<ProgressBarComponent> = {
+  args: {
+    value: 50,
+    feedbackText: { text: "Uploading…", type: "hint", position: "left" },
+  },
+};
+
+export const Vertical: StoryObj<ProgressBarComponent> = {
+  args: {
+    value: 50,
+    feedbackText: { text: "Uploading…", type: "hint", position: "left" },
+    direction: "vertical",
+  },
+};

community/components/navigation/index.ts

@@ -2,3 +2,4 @@ export * from "./breadcrumbs/breadcrumbs.component";
 export * from "./pagination/pagination.component";
 export * from "./table-of-contents";
 export * from "./tabs";
+export * from "./vertical-stepper";

community/index.ts

@@ -5,3 +5,4 @@ export * from "./components/navigation";
 export * from "./components/overlay";
 export * from "./components/tags";
 export * from "./components/table";
+export * from "./components/helpers";