TEDI Release 30.10.2025

.github/ISSUE_TEMPLATE/angular-community-component-issue.md

@@ -2,8 +2,8 @@
 name: Angular Community component issue
 about: Use this template if the issue is on the Angular Community side, bug, enhancement
   etc
-title: "[Component name]:"
-labels: Angular, community
+title: "[Component_name]:"
+labels: community
 assignees: ''
 
 ---
@@ -13,3 +13,5 @@ assignees: ''
 ## Solution
 
 ## Examples and information
+
+## Project

.github/ISSUE_TEMPLATE/angular-tedi-ready-component-issue.md

@@ -2,8 +2,8 @@
 name: Angular TEDI-READY component issue
 about: Use this template if the issue is on the Angular TEDI-READY side, bug, enhancement
   etc
-title: "[Component name]:"
-labels: Angular, tedi-ready
+title: "[Component_name]:"
+labels: tedi-ready
 assignees: mart-sessman
 
 ---
@@ -13,3 +13,5 @@ assignees: mart-sessman
 ## Solution
 
 ## Examples and information
+
+## Project

.github/ISSUE_TEMPLATE/general-issue-template.md

@@ -12,3 +12,5 @@ assignees: ''
 ## Solution
 
 ## Examples and information
+
+## Project

.github/workflows/deploy-github-pages.yml

@@ -53,7 +53,7 @@ jobs:
           npm ci
           npm run build:sb
           mkdir -p compiled-storybook
-          mv dist/storybook-static compiled-storybook/
+          mv dist/storybook-static/* compiled-storybook/
       - uses: actions/upload-artifact@v4
         with:
           name: ${{ strategy.job-index }}
@@ -78,13 +78,13 @@ jobs:
         name: "Download artifacts"
         with:
           path: branches/
-      - name: Create public folder
+      - name: Create gpages folder
         shell: bash
         run: |
           ls -la branches
-          mkdir public
-          mv .github/workflows/index.html ./public/index.html
-          cd public
+          mkdir gpages
+          mv .github/workflows/index.html ./gpages/index.html
+          cd gpages
           branches=$(echo '${{ needs.build_matrix.outputs.json_branches }}' | jq -r '.[]')
           valid_branches=""
           i=-1
@@ -108,7 +108,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./public/
+          path: ./gpages/
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.storybook/main.ts

@@ -12,9 +12,9 @@ const config: StorybookConfig = {
     "../community/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-onboarding",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
     "@etchteam/storybook-addon-status",
     "storybook-addon-pseudo-states",
     "storybook-addon-angular-router",

community/components/cards/card/card-content/card-content.component.scss

@@ -1,11 +1,4 @@
 .tedi-card-content {
-  --_card-padding-vertical: var(--_card-padding);
-  --_card-padding-horizontal: var(--_card-padding);
-  --_card-padding-top: var(--_card-padding-vertical);
-  --_card-padding-bottom: var(--_card-padding-vertical);
-  --_card-padding-left: var(--_card-padding-horizontal);
-  --_card-padding-right: var(--_card-padding-horizontal);
-
   display: block;
   background-color: var(--_card-bg);
   border: 1px solid var(--_card-border);

community/components/cards/card/stories/card-story-templates.ts

@@ -313,10 +313,15 @@ export const renderNestedCardsStory = () => {
 
 export const renderCardPaddingsStory = () => {
   return {
-    template: `<tedi-card padding="lg"
-    ><tedi-card-content background="secondary" [padding]="{ left: 'xs' }"
-      >Card has lg padding. Card content has xs left padding.</tedi-card-content
-    ></tedi-card
+    template: `
+    <tedi-card [padding]="{left:'xs', right: 'none', top: 'none'}">
+      <tedi-card-header [padding]="{top: 'lg'}">
+        Top LG
+      </tedi-card-header>
+      <tedi-card-content background="secondary">
+        Parent has left XS, right NONE, Top NONE.
+      </tedi-card-content>
+    </tedi-card
   >`,
   };
 };

community/components/cards/card/stories/card.stories.ts

@@ -33,6 +33,14 @@ export default {
     spacing: "md",
   },
   argTypes: {
+    border: {
+      description: "Changes border color for card.",
+    },
+    padding: {
+      description: "Changes padding for card.",
+      control: "radio",
+      options: ["xs", "sm", "md", "lg", "none"],
+    },
     borderless: {
       description: "Removes border from card.",
       control: "boolean",

community/components/form/file-dropzone/file-dropzone.component.html

@@ -48,12 +48,15 @@
           {{ file.label ?? file.name }}
 
           @if (file && validateIndividually() && file.helper; as helper) {
-            <tedi-tooltip [className]="tooltipClasses(file)">
+            <tedi-tooltip
+              [className]="tooltipClasses(file)"
+              [position]="helper?.position || 'top'"
+            >
               <tedi-tooltip-trigger>
                 <button tedi-info-button [disabled]="file.disabled"></button>
               </tedi-tooltip-trigger>
 
-              <tedi-tooltip-content [position]="helper?.position || 'top'">
+              <tedi-tooltip-content>
                 {{ helper.text }}
               </tedi-tooltip-content>
             </tedi-tooltip>

community/components/form/file-dropzone/index.ts

@@ -1 +1,4 @@
 export * from "./file-dropzone.component";
+export * from "./constants";
+export * from "./types";
+export * from "./utils";

community/components/form/input-group/input-group.component.scss

@@ -157,6 +157,11 @@
   &:empty {
     display: none;
   }
+
+  .tedi-select__arrow {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .tedi-input-group__prefix {

community/components/form/select/multiselect.component.html

@@ -89,7 +89,7 @@
   <tedi-card
     class="tedi-select__dropdown"
     spacing="none"
-    [style.width.px]="dropdownWidth()"
+    [style.width]="!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'"
   >
     <tedi-card-content>
       <ul

community/components/form/select/multiselect.component.ts

@@ -136,6 +136,13 @@ export class MultiselectComponent
    * @default true
    */
   clearable = input<boolean>(true);
+  /**
+   * Optional element reference to calculate dropdown width from.
+   * If provided but null, dropdown will use auto width.
+   * If not provided, defaults to the host element width.
+   * @default undefined
+   */
+  dropdownWidthRef = input<ElementRef | null>();
   feedbackText = input<ComponentInputs<FeedbackTextComponent>>();
 
   readonly specialOptionControls = specialOptionControls;
@@ -146,7 +153,7 @@ export class MultiselectComponent
   triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
   hostRef = inject(ElementRef);
   options = contentChildren(SelectOptionComponent);
-  dropdownWidth = signal(0);
+  dropdownWidth = signal<number | null>(0);
   disabled = signal(false);
 
   optionGroups = computed(() => {
@@ -220,8 +227,14 @@ export class MultiselectComponent
   }
 
   private setDropdownWidth(): void {
-    const computedWidth =
-      this.hostRef?.nativeElement?.getBoundingClientRect()?.width ?? 0;
+    const widthRef = this.dropdownWidthRef();
+    if (widthRef === null) {
+      this.dropdownWidth.set(null);
+      return;
+    }
+
+    const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
+    const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
     this.dropdownWidth.set(computedWidth);
   }
 

community/components/form/select/multiselect.stories.ts

@@ -370,3 +370,62 @@ export const multiselectNoOptions: Story = {
     },
   }),
 };
+
+export const multiselectAutoWidthDropdown: Story = {
+  render: (args) => ({
+    template: `
+      <tedi-multiselect
+        [inputId]="inputId"
+        [placeholder]="placeholder"
+        [label]="label"
+        [feedbackText]="feedbackText"
+        [required]="required"
+        [state]="state"
+        [size]="size"
+        [multiRow]="multiRow"
+        [clearableTags]="clearableTags"
+        [selectAll]="selectAll"
+        [selectableGroups]="selectableGroups"
+        [clearable]="clearable"
+        [dropdownWidthRef]="null"
+        [disabled]="disabled"
+      >
+        <tedi-select-option value="option1" label="Option 1" />
+        <tedi-select-option value="option2" label="Option 2" />
+        <tedi-select-option value="option3" label="Option 3" />
+        <tedi-select-option value="option4" label="Option 4" />
+        <tedi-select-option value="option5" label="Option 5" />
+      </tedi-multiselect>
+    `,
+    props: {
+      ...args,
+    },
+  }),
+};
+
+export const multiselectCustomWidthDropdown: Story = {
+  render: (args) => ({
+    template: `
+      <div #customWidthElement style="width: 400px; border: 1px solid black; padding: 8px; margin-bottom: 16px;">
+        This div sets the dropdown width to 400px
+      </div>
+      <tedi-multiselect
+        [inputId]="inputId"
+        [placeholder]="placeholder"
+        [label]="label"
+        [feedbackText]="feedbackText"
+        [dropdownWidthRef]="getElementRef(customWidthElement)"
+      >
+        <tedi-select-option value="option1" label="Option 1" />
+        <tedi-select-option value="option2" label="Option 2" />
+        <tedi-select-option value="option3" label="Option 3" />
+        <tedi-select-option value="option4" label="Option 4" />
+        <tedi-select-option value="option5" label="Option 5" />
+      </tedi-multiselect>
+    `,
+    props: {
+      ...args,
+      getElementRef: (element: HTMLElement) => ({ nativeElement: element }),
+    },
+  }),
+};

community/components/form/select/select.component.html

@@ -77,14 +77,13 @@
   <tedi-card
     class="tedi-select__dropdown"
     spacing="none"
-    [style.width.px]="dropdownWidth()"
+    [style.width]="!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'"
   >
     <tedi-card-content>
       <ul
         [id]="listboxId"
         class="tedi-select__options"
         cdkListbox
-        cdkListboxUseActiveDescendant
         [cdkListboxValue]="selectedOptions()"
         (cdkListboxValueChange)="handleValueChange($event)"
       >

community/components/form/select/select.component.scss

@@ -50,8 +50,6 @@
 
   &__dropdown {
     box-shadow: 0px 1px 5px 0px var(--alpha-20);
-    max-height: 300px;
-    overflow-y: auto;
 
     @include mixins.responsive-styles(margin-top, form-field-outer-spacing);
     @include mixins.responsive-styles(margin-bottom, form-field-outer-spacing);
@@ -60,6 +58,8 @@
   &__options {
     margin: 0;
     padding: 0;
+    max-height: 300px;
+    overflow-y: auto;
 
     &:focus .cdk-option-active {
       background: var(--dropdown-item-hover-background);