@tedi-design-system/angular 4.2.0-rc.1 → 5.0.0-rc.2

package/community/components/navigation/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./breadcrumbs/breadcrumbs.component";
 export * from "./pagination/pagination.component";
+export * from "./table-of-contents";
 export * from "./tabs";
 //# sourceMappingURL=index.d.ts.map

package/community/components/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../community/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../community/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC"}

package/community/components/navigation/table-of-contents/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./table-of-contents.component";
+export * from "./table-of-contents-nested-wrapper.component";
+export * from "./table-of-contents-item/table-of-contents-item.component";
+//# sourceMappingURL=index.d.ts.map

package/community/components/navigation/table-of-contents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../community/components/navigation/table-of-contents/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8CAA8C,CAAC;AAC7D,cAAc,2DAA2D,CAAC"}

package/community/components/navigation/table-of-contents/table-of-contents-item/table-of-contents-item.component.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class TableOfContentsItemComponent {
+    idTo: import("@angular/core").InputSignal<string>;
+    selected: import("@angular/core").WritableSignal<boolean>;
+    itemSelected: EventEmitter<string>;
+    classes: import("@angular/core").Signal<string>;
+    itemClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableOfContentsItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableOfContentsItemComponent, "tedi-table-of-contents-item", never, { "idTo": { "alias": "idTo"; "required": true; "isSignal": true; }; }, {}, never, ["*", "tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper"], true, never>;
+}
+//# sourceMappingURL=table-of-contents-item.component.d.ts.map

package/community/components/navigation/table-of-contents/table-of-contents-item/table-of-contents-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents-item.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/navigation/table-of-contents/table-of-contents-item/table-of-contents-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EACb,MAAM,eAAe,CAAC;;AAGvB,qBAMa,4BAA4B;IACvC,IAAI,8CAA4B;IAEhC,QAAQ,kDAAiB;IAEzB,YAAY,uBAA8B;IAE1C,OAAO,yCAMJ;IAEH,SAAS;yCAfE,4BAA4B;2CAA5B,4BAA4B;CAkBxC"}

package/community/components/navigation/table-of-contents/table-of-contents-nested-wrapper.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+/**
+ * Wrapper component for nested table of contents items.
+ * Workaround for https://github.com/angular/angular/issues/57345,
+ * which is a issue when you use `@if() {}` syntax inside a component that uses ng-content.
+ */
+export declare class TableOfContentsNestedWrapperComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableOfContentsNestedWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableOfContentsNestedWrapperComponent, "tedi-table-of-contents-nested-wrapper", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=table-of-contents-nested-wrapper.component.d.ts.map

package/community/components/navigation/table-of-contents/table-of-contents-nested-wrapper.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents-nested-wrapper.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/navigation/table-of-contents/table-of-contents-nested-wrapper.component.ts"],"names":[],"mappings":";AAEA;;;;GAIG;AACH,qBAIa,qCAAqC;yCAArC,qCAAqC;2CAArC,qCAAqC;CAAG"}

package/community/components/navigation/table-of-contents/table-of-contents.component.d.ts

@@ -0,0 +1,76 @@
+import { TemplateRef, OnDestroy, AfterContentInit } from "@angular/core";
+import { DialogRef } from "@angular/cdk/dialog";
+import { TableOfContentsItemComponent } from "./table-of-contents-item/table-of-contents-item.component";
+import * as i0 from "@angular/core";
+export type TableOfContentsPosition = "default" | "fixed" | "sticky";
+export type TableOfContentsBreakpoint = "mobile" | "tablet" | "desktop" | "never";
+export declare class TableOfContentsComponent implements OnDestroy, AfterContentInit {
+    /**
+     * Heading of the table of contents
+     */
+    heading: import("@angular/core").InputSignal<string>;
+    /**
+     * Should component be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Should the component be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open?: boolean;
+    /**
+     * Should child table of contents elements when clicked scroll
+     */
+    scrollOnClick: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Callback when component is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Position strategy of the table of contents
+     * @default default
+     */
+    position: import("@angular/core").InputSignal<TableOfContentsPosition>;
+    /**
+     * ARIA label for the <nav> component
+     */
+    ariaLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * Breakpoint to switch to modal view
+     * @default mobile
+     */
+    modalBreakpoint: import("@angular/core").InputSignal<TableOfContentsBreakpoint>;
+    /**
+     * Should the component track scroll and update active item
+     */
+    scrollAware: import("@angular/core").InputSignal<boolean>;
+    isSeeking: boolean;
+    seekingTimeout: NodeJS.Timeout | undefined;
+    dialogRef?: DialogRef;
+    isOpen: import("@angular/core").WritableSignal<boolean>;
+    templateRef: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
+    private intersectionObservers;
+    private tableItems;
+    private router;
+    private dialog;
+    private update$;
+    private itemsChanged$;
+    activeElement: import("@angular/core").Signal<TableOfContentsItemComponent | undefined>;
+    activeId: import("@angular/core").Signal<string | undefined>;
+    classes: import("@angular/core").Signal<string>;
+    footerClasses: import("@angular/core").Signal<string>;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    openMobileModal(): void;
+    seekTo(id: string): void;
+    private hookItems;
+    private hookObservers;
+    observerCallback(): void;
+    private cleanupObservers;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableOfContentsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableOfContentsComponent, "tedi-table-of-contents", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "scrollOnClick": { "alias": "scrollOnClick"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "modalBreakpoint": { "alias": "modalBreakpoint"; "required": false; "isSignal": true; }; "scrollAware": { "alias": "scrollAware"; "required": false; "isSignal": true; }; }, {}, ["tableItems"], ["*"], true, never>;
+}
+//# sourceMappingURL=table-of-contents.component.d.ts.map

package/community/components/navigation/table-of-contents/table-of-contents.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/navigation/table-of-contents/table-of-contents.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,WAAW,EAGX,SAAS,EACT,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAU,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,4BAA4B,EAAE,MAAM,2DAA2D,CAAC;;AAIzG,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrE,MAAM,MAAM,yBAAyB,GACjC,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;AAEZ,qBAca,wBAAyB,YAAW,SAAS,EAAE,gBAAgB;IAC1E;;OAEG;IACH,OAAO,8CAA4B;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,aAAa,+CAAwB;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,QAAQ,+DAA6C;IAErD;;OAEG;IACH,SAAS,8CAAsC;IAE/C;;;OAGG;IACH,eAAe,iEAA8C;IAE7D;;OAEG;IACH,WAAW,+CAAwB;IAEnC,SAAS,UAAS;IAClB,cAAc,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,MAAM,kDAAiB;IAEvB,WAAW,mEAAsD;IAEjE,OAAO,CAAC,qBAAqB,CAA8B;IAE3D,OAAO,CAAC,UAAU,CAEf;IACH,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,aAAa,CAAuB;IAE5C,aAAa,2EAEX;IAEF,QAAQ,qDAAgD;IAExD,OAAO,yCAYJ;IAEH,aAAa,yCAMV;;IAUH,kBAAkB,IAAI,IAAI;IAK1B,WAAW,IAAI,IAAI;IAOnB,eAAe;IAef,MAAM,CAAC,EAAE,EAAE,MAAM;IA4BjB,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,aAAa;IAqBrB,gBAAgB;IAmChB,OAAO,CAAC,gBAAgB;yCAtOb,wBAAwB;2CAAxB,wBAAwB;CA0OpC"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, signal, contentChildren, effect, booleanAttribute, model, forwardRef, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable } from '@angular/core';
+import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, signal, contentChildren, effect, booleanAttribute, model, forwardRef, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, EventEmitter } from '@angular/core';
 import * as i1 from '@tedi-design-system/angular/tedi';
 import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, InfoButtonComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
 import * as i1$2 from '@angular/forms';
@@ -9,16 +9,17 @@ import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/listbox';
 import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
-import { DialogRef, DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
+import { DialogRef, DIALOG_DATA, DialogModule, Dialog } from '@angular/cdk/dialog';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import * as i1$1 from '@angular/common';
-import { NgStyle, CommonModule } from '@angular/common';
+import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuModule } from '@angular/cdk/menu';
 import * as i1$3 from '@angular/router';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { RouterLink, Router, RouterLinkActive } from '@angular/router';
+import { CardComponent as CardComponent$1, CardContentComponent as CardContentComponent$1 } from 'community/components/cards';
+import { Subject, takeUntil, startWith } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { startWith } from 'rxjs';
 
 class FloatingButtonComponent {
     /**
@@ -1211,13 +1212,13 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "tedi-modal", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxWidth: "maxWidthChange", variant: "variantChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"tedi-modal__container\">\n  <ng-content select=\"tedi-modal-header\" />\n  <div class=\"tedi-modal__content\" cdkScrollable>\n    <ng-content />\n  </div>\n\n  <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--borders-01) solid var(--modal-border-outer);--_modal-padding: var(--dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--dimensions-10);--modal-heading-padding-x-tablet: var(--dimensions-10);--modal-heading-padding-x-mobile: var(--dimensions-10);--modal-heading-padding-y-desktop: var(--dimensions-05);--modal-heading-padding-y-tablet: var(--dimensions-05);--modal-heading-padding-y-mobile: var(--dimensions-05);--modal-footer-padding-x-desktop: var(--dimensions-10);--modal-footer-padding-x-tablet: var(--dimensions-10);--modal-footer-padding-x-mobile: var(--dimensions-10);--modal-footer-padding-y-desktop: var(--dimensions-05);--modal-footer-padding-y-tablet: var(--dimensions-05);--modal-footer-padding-y-mobile: var(--dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "tedi-modal", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxWidth: "maxWidthChange", variant: "variantChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"tedi-modal__container\">\n  <ng-content select=\"tedi-modal-header\" />\n  <div class=\"tedi-modal__content\" cdkScrollable>\n    <ng-content />\n  </div>\n\n  <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--borders-01) solid var(--modal-border-outer);--_modal-padding: var(--dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--dimensions-10);--modal-heading-padding-x-tablet: var(--dimensions-10);--modal-heading-padding-x-mobile: var(--dimensions-10);--modal-heading-padding-y-desktop: var(--dimensions-05);--modal-heading-padding-y-tablet: var(--dimensions-05);--modal-heading-padding-y-mobile: var(--dimensions-05);--modal-footer-padding-x-desktop: var(--dimensions-10);--modal-footer-padding-x-tablet: var(--dimensions-10);--modal-footer-padding-x-mobile: var(--dimensions-10);--modal-footer-padding-y-desktop: var(--dimensions-05);--modal-footer-padding-y-tablet: var(--dimensions-05);--modal-footer-padding-y-mobile: var(--dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}.tedi-bottom-dialog{bottom:20%}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-modal", imports: [DialogModule, CdkScrollable], encapsulation: ViewEncapsulation.None, host: {
                         "[class]": "hostClasses()",
-                    }, template: "<div class=\"tedi-modal__container\">\n  <ng-content select=\"tedi-modal-header\" />\n  <div class=\"tedi-modal__content\" cdkScrollable>\n    <ng-content />\n  </div>\n\n  <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--borders-01) solid var(--modal-border-outer);--_modal-padding: var(--dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--dimensions-10);--modal-heading-padding-x-tablet: var(--dimensions-10);--modal-heading-padding-x-mobile: var(--dimensions-10);--modal-heading-padding-y-desktop: var(--dimensions-05);--modal-heading-padding-y-tablet: var(--dimensions-05);--modal-heading-padding-y-mobile: var(--dimensions-05);--modal-footer-padding-x-desktop: var(--dimensions-10);--modal-footer-padding-x-tablet: var(--dimensions-10);--modal-footer-padding-x-mobile: var(--dimensions-10);--modal-footer-padding-y-desktop: var(--dimensions-05);--modal-footer-padding-y-tablet: var(--dimensions-05);--modal-footer-padding-y-mobile: var(--dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}\n"] }]
+                    }, template: "<div class=\"tedi-modal__container\">\n  <ng-content select=\"tedi-modal-header\" />\n  <div class=\"tedi-modal__content\" cdkScrollable>\n    <ng-content />\n  </div>\n\n  <ng-content select=\"tedi-modal-footer\" />\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane:has(.tedi-modal--width-xs),.tedi-modal--width-xs{width:100%;max-width:var(--modal-max-width-xs)}.cdk-overlay-pane:has(.tedi-modal--width-sm),.tedi-modal--width-sm{width:100%;max-width:var(--modal-max-width-sm)}.cdk-overlay-pane:has(.tedi-modal--width-md),.tedi-modal--width-md{width:100%;max-width:var(--modal-max-width-md)}.cdk-overlay-pane:has(.tedi-modal--width-lg),.tedi-modal--width-lg{width:100%;max-width:var(--modal-max-width-lg)}.cdk-overlay-pane:has(.tedi-modal--width-xl),.tedi-modal--width-xl{width:100%;max-width:var(--modal-max-width-xl)}.tedi-modal{--_modal-border: var(--borders-01) solid var(--modal-border-outer);--_modal-padding: var(--dimensions-13);--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);overflow:auto;----_tedi-modal-heading-padding-x-x-desktop: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-tablet: var(--dimensions-10);----_tedi-modal-heading-padding-x-x-mobile: var(--dimensions-10);----_tedi-modal-heading-padding-x-y-desktop: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-tablet: var(--dimensions-05);----_tedi-modal-heading-padding-x-y-mobile: var(--dimensions-05)}.tedi-modal--padding-small{--modal-heading-padding-x-desktop: var(--dimensions-10);--modal-heading-padding-x-tablet: var(--dimensions-10);--modal-heading-padding-x-mobile: var(--dimensions-10);--modal-heading-padding-y-desktop: var(--dimensions-05);--modal-heading-padding-y-tablet: var(--dimensions-05);--modal-heading-padding-y-mobile: var(--dimensions-05);--modal-footer-padding-x-desktop: var(--dimensions-10);--modal-footer-padding-x-tablet: var(--dimensions-10);--modal-footer-padding-x-mobile: var(--dimensions-10);--modal-footer-padding-y-desktop: var(--dimensions-05);--modal-footer-padding-y-tablet: var(--dimensions-05);--modal-footer-padding-y-mobile: var(--dimensions-05)}.tedi-modal__content{padding:var(--_modal-padding);overflow-y:auto}.tedi-modal__container{display:flex;flex-direction:column;max-height:95dvh;background-color:var(--modal-background);border:var(--_modal-border);border-radius:var(--modal-radius)}.tedi-bottom-dialog{bottom:20%}\n"] }]
         }] });
 
 class ModalFooterComponent {
@@ -2741,7 +2742,7 @@ class BreadcrumbsComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { crumbs: { classPropertyName: "crumbs", publicName: "crumbs", isSignal: true, isRequired: false, transformFunction: null }, shortCrumbs: { classPropertyName: "shortCrumbs", publicName: "shortCrumbs", 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 } }, ngImport: i0, template: "<nav\n  *ngIf=\"this.breakpointInputs().crumbs.length > 0\"\n  aria-label=\"Breadcrumb\"\n  class=\"tedi__breadcrumbs\"\n>\n  <ol class=\"tedi__breadcrumbs__list\">\n    <ng-container *ngIf=\"!this.breakpointInputs().shortCrumbs\">\n      <ng-container\n        *ngFor=\"let crumb of this.breakpointInputs().crumbs; let last = last\"\n      >\n        @if (!last) {\n          <li class=\"tedi__breadcrumbs__item\">\n            <a tedi-link [routerLink]=\"crumb.href\" [underline]=\"false\">{{\n              crumb.label\n            }}</a>\n            <tedi-icon color=\"brand\" name=\"chevron_right\" />\n          </li>\n        } @else {\n          <li\n            aria-current=\"page\"\n            tedi-text\n            modifiers=\"inline-block\"\n            color=\"secondary\"\n          >\n            {{ crumb.label }}\n          </li>\n        }\n      </ng-container>\n    </ng-container>\n  </ol>\n  <ng-container\n    *ngIf=\"\n      this.breakpointInputs().crumbs.length > 1 &&\n      this.breakpointInputs().shortCrumbs\n    \"\n  >\n    <div class=\"tedi__breadcrumbs__item\">\n      <tedi-icon color=\"brand\" name=\"arrow_back\" />\n      <a\n        tedi-link\n        [routerLink]=\"getSecondLastCrumb()?.href\"\n        [underline]=\"false\"\n        >{{ getSecondLastCrumb()?.label }}</a\n      >\n    </div>\n  </ng-container>\n</nav>\n", styles: [":host{display:block}.tedi__breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;list-style:none}.tedi__breadcrumbs__item{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { crumbs: { classPropertyName: "crumbs", publicName: "crumbs", isSignal: true, isRequired: false, transformFunction: null }, shortCrumbs: { classPropertyName: "shortCrumbs", publicName: "shortCrumbs", 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 } }, ngImport: i0, template: "<nav\n  *ngIf=\"this.breakpointInputs().crumbs.length > 0\"\n  aria-label=\"Breadcrumb\"\n  class=\"tedi__breadcrumbs\"\n>\n  <ol class=\"tedi__breadcrumbs__list\">\n    <ng-container *ngIf=\"!this.breakpointInputs().shortCrumbs\">\n      <ng-container\n        *ngFor=\"let crumb of this.breakpointInputs().crumbs; let last = last\"\n      >\n        @if (!last) {\n          <li class=\"tedi__breadcrumbs__item\">\n            <a tedi-link [routerLink]=\"crumb.href\" [underline]=\"false\">{{\n              crumb.label\n            }}</a>\n            <tedi-icon color=\"brand\" name=\"chevron_right\" />\n          </li>\n        } @else {\n          <li\n            aria-current=\"page\"\n            tedi-text\n            modifiers=\"inline-block\"\n            color=\"secondary\"\n          >\n            {{ crumb.label }}\n          </li>\n        }\n      </ng-container>\n    </ng-container>\n  </ol>\n  <ng-container\n    *ngIf=\"\n      this.breakpointInputs().crumbs.length > 1 &&\n      this.breakpointInputs().shortCrumbs\n    \"\n  >\n    <div class=\"tedi__breadcrumbs__item\">\n      <tedi-icon color=\"brand\" name=\"arrow_back\" />\n      <a\n        tedi-link\n        [routerLink]=\"getSecondLastCrumb()?.href\"\n        [underline]=\"false\"\n        >{{ getSecondLastCrumb()?.label }}</a\n      >\n    </div>\n  </ng-container>\n</nav>\n", styles: [":host{display:block}.tedi__breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;list-style:none}.tedi__breadcrumbs__item{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2835,6 +2836,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-pagination\">\n  @if (!hideResults()) {\n    <span\n      tedi-text\n      class=\"tedi-pagination__results\"\n      color=\"secondary\"\n      modifiers=\"small\"\n      >{{ length() }} {{ \"pagination.results\" | tediTranslate: length() }}</span\n    >\n  }\n  <nav\n    [attr.aria-label]=\"'pagination.title' | tediTranslate\"\n    class=\"tedi-pagination__pager\"\n  >\n    <ul class=\"tedi-pagination__pages\">\n      <li>\n        <button\n          tedi-button\n          [disabled]=\"!hasPreviousButton()\"\n          class=\"tedi-pagination__nav-button\"\n          size=\"small\"\n          variant=\"neutral\"\n          type=\"button\"\n          (click)=\"changePage(-1)\"\n          [attr.aria-label]=\"'pagination.prev-page' | tediTranslate\"\n        >\n          <tedi-icon name=\"arrow_back\" />\n        </button>\n      </li>\n      @for (pageNr of pages(); track $index) {\n        <li>\n          <tedi-pagination-page\n            [page]=\"pageNr\"\n            [active]=\"pageNr === page()\"\n            (pageSelected)=\"selectPage(pageNr)\"\n          />\n        </li>\n      }\n      <li>\n        <button\n          tedi-button\n          [disabled]=\"!hasNextButton()\"\n          class=\"tedi-pagination__nav-button\"\n          size=\"small\"\n          variant=\"neutral\"\n          type=\"button\"\n          (click)=\"changePage(1)\"\n          [attr.aria-label]=\"'pagination.next-page' | tediTranslate\"\n        >\n          <tedi-icon name=\"arrow_forward\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n\n  @if (!hidePageSize()) {\n    <div class=\"tedi-pagination__page-size-options\">\n      <label tedi-text color=\"secondary\" modifiers=\"small\" [for]=\"dropdownId\">{{\n        \"pagination.page-size\" | tediTranslate\n      }}</label>\n      <select\n        [id]=\"dropdownId\"\n        [(ngModel)]=\"pageSize\"\n        (change)=\"pageSizeChanged()\"\n        class=\"tedi-pagination__dropdown\"\n      >\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{--_pagination-border: var(--general-border-secondary, #9293a4);--_pagination-background: var(--general-surface-primary, #fff);--_pagination-page-background: transparent;--_pagination-page-text: var(--general-text-secondary, #4b4e62);--_pagination-layout: \"results page-size-options\" \"pager pager\";--_pagination-padding-y: var(--pagination-padding-y);--_pagination-padding-x: var(--pagination-padding-x);--_pagination-button-size: var(--pagination-button-size);border-top:1px solid var(--_pagination-border);background:var(--_pagination-background);padding:var(--_pagination-padding-y) var(--_pagination-padding-x);display:grid;align-items:center;grid-template-areas:var(--_pagination-layout);gap:var(--layout-grid-gutters-04)}@media (min-width: 768px){.tedi-pagination{--_pagination-layout: \"results pager page-size-options\";grid-template-columns:repeat(3,1fr)}}.tedi-pagination__results{grid-area:results}.tedi-pagination__pager{grid-area:pager;justify-self:center}.tedi-pagination__pages{display:flex;justify-items:center;align-items:center;list-style:none;margin:0;gap:var(--layout-grid-gutters-08)}.tedi-pagination__page{display:flex;justify-content:center;align-items:center;height:100%;width:100%;flex-shrink:0;border-radius:50%;border:none;background:var(--_pagination-page-background);color:var(--_pagination-page-text);cursor:pointer}.tedi-pagination__page:hover{--_pagination-page-background: var( --button-main-neutral-icon-only-background-hover, #e7f0f6 );--_pagination-page-text: var(--button-main-neutral-text-hover, #004277)}.tedi-pagination__page:active{--_pagination-page-background: var( --button-main-neutral-icon-only-background-active, #d0e1ee );--_pagination-page-text: var(--button-main-neutral-text-active, #003662)}.tedi-pagination__page:focus{--_pagination-page-background: var( --button-main-neutral-icon-only-background-focus, rgba(0, 0, 0, 0) );--_pagination-page-text: var(--button-main-neutral-text-focus, #005aa3)}.tedi-pagination__page.tedi-pagination__page--active{--_pagination-page-background: var( --general-surface-brand-secondary, #004277 );--_pagination-page-text: var(--general-text-white, #fff);pointer-events:none}.tedi-pagination__nav-button.tedi-button[disabled]{color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}.tedi-pagination__page-size-options{grid-area:page-size-options;display:flex;align-items:center;justify-self:flex-end;gap:var(--form-field-inner-spacing)}.tedi-pagination__dropdown{border:1px solid var(--form-input-border-default, #838494);border-radius:var(--form-field-radius);min-height:var(--form-field-height-sm)}\n"] }]
         }] });
 
+class TableOfContentsItemComponent {
+    idTo = input.required();
+    selected = signal(false);
+    itemSelected = new EventEmitter();
+    classes = computed(() => {
+        const classes = ["table-of-contents__item"];
+        if (this.selected()) {
+            classes.push("table-of-contents__item--active");
+        }
+        return classes.join(" ");
+    });
+    itemClick() {
+        this.itemSelected.emit(this.idTo());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TableOfContentsItemComponent, isStandalone: true, selector: "tedi-table-of-contents-item", inputs: { idTo: { classPropertyName: "idTo", publicName: "idTo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n  <a\n    tedi-button\n    variant=\"neutral\"\n    class=\"table-of-contents__item-anchor\"\n    (click)=\"itemClick()\"\n  >\n    <ng-content />\n  </a>\n\n  <ng-content\n    select=\"tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper\"\n  />\n</div>\n", styles: [".table-of-contents__item{display:flex;flex-direction:column;gap:var(--dimensions-05)}.table-of-contents__item--active .table-of-contents__item-anchor{border-color:var(--link-primary-default);color:var(--link-primary-active)}.table-of-contents__item--active .table-of-contents__item-anchor:hover{border-color:var(--link-primary-active)}.table-of-contents__item .table-of-contents__item .table-of-contents__item-anchor{padding-left:var(--table-of-contents-padding-left-level-2)}.table-of-contents__item-anchor{display:flex;align-items:flex-start;flex-direction:column;--_table-of-contents-inset: 1px;padding:0 calc(var(--table-of-contents-padding-left-level-1) - var(--_table-of-contents-inset));border:0;border-left:var(--table-of-contents-active-item-border-width) solid transparent;border-radius:0;margin-left:-var(--_table-of-contents-inset)}.table-of-contents__item-anchor:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-table-of-contents-item", imports: [ButtonComponent], template: "<div [class]=\"classes()\">\n  <a\n    tedi-button\n    variant=\"neutral\"\n    class=\"table-of-contents__item-anchor\"\n    (click)=\"itemClick()\"\n  >\n    <ng-content />\n  </a>\n\n  <ng-content\n    select=\"tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper\"\n  />\n</div>\n", styles: [".table-of-contents__item{display:flex;flex-direction:column;gap:var(--dimensions-05)}.table-of-contents__item--active .table-of-contents__item-anchor{border-color:var(--link-primary-default);color:var(--link-primary-active)}.table-of-contents__item--active .table-of-contents__item-anchor:hover{border-color:var(--link-primary-active)}.table-of-contents__item .table-of-contents__item .table-of-contents__item-anchor{padding-left:var(--table-of-contents-padding-left-level-2)}.table-of-contents__item-anchor{display:flex;align-items:flex-start;flex-direction:column;--_table-of-contents-inset: 1px;padding:0 calc(var(--table-of-contents-padding-left-level-1) - var(--_table-of-contents-inset));border:0;border-left:var(--table-of-contents-active-item-border-width) solid transparent;border-radius:0;margin-left:-var(--_table-of-contents-inset)}.table-of-contents__item-anchor:hover{text-decoration:underline}\n"] }]
+        }] });
+
+class TableOfContentsComponent {
+    /**
+     * Heading of the table of contents
+     */
+    heading = input.required();
+    /**
+     * Should component be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen;
+    /**
+     * Should the component be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open;
+    /**
+     * Should child table of contents elements when clicked scroll
+     */
+    scrollOnClick = input(true);
+    /**
+     * Callback when component is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle;
+    /**
+     * Position strategy of the table of contents
+     * @default default
+     */
+    position = input("default");
+    /**
+     * ARIA label for the <nav> component
+     */
+    ariaLabel = input("Table of contents");
+    /**
+     * Breakpoint to switch to modal view
+     * @default mobile
+     */
+    modalBreakpoint = input("mobile");
+    /**
+     * Should the component track scroll and update active item
+     */
+    scrollAware = input(true);
+    isSeeking = false;
+    seekingTimeout;
+    dialogRef;
+    isOpen = signal(false);
+    templateRef = viewChild("defaultTemplate");
+    intersectionObservers = [];
+    tableItems = contentChildren(TableOfContentsItemComponent, {
+        descendants: true,
+    });
+    router = inject(Router);
+    dialog = inject(Dialog);
+    update$ = new Subject();
+    itemsChanged$ = new Subject();
+    activeElement = computed(() => this.tableItems().find((item) => item.selected()));
+    activeId = computed(() => this.activeElement()?.idTo());
+    classes = computed(() => {
+        const classes = ["table-of-contents"];
+        classes.push(`table-of-contents--position-${this.position() ?? "default"}`);
+        if (this.modalBreakpoint() !== "never") {
+            classes.push(`table-of-contents--modal-breakpoint-${this.modalBreakpoint()}`);
+        }
+        if (this.isOpen()) {
+            classes.push("table-of-contents--modal-active");
+        }
+        return classes.join(" ");
+    });
+    footerClasses = computed(() => {
+        const classes = ["table-of-contents__footer"];
+        classes.push(`table-of-contents__footer--modal-breakpoint-${this.modalBreakpoint()}`);
+        return classes.join(" ");
+    });
+    constructor() {
+        effect(() => {
+            const items = this.tableItems();
+            this.itemsChanged$.next();
+            this.hookItems(items);
+        });
+    }
+    ngAfterContentInit() {
+        const items = this.tableItems();
+        this.hookObservers(items);
+    }
+    ngOnDestroy() {
+        this.cleanupObservers();
+        this.update$.next();
+        this.update$.complete();
+    }
+    openMobileModal() {
+        const templateRef = this.templateRef();
+        if (!templateRef) {
+            return;
+        }
+        this.dialogRef = this.dialog.open(templateRef);
+        this.isOpen.set(true);
+        this.dialogRef.closed.subscribe(() => {
+            this.isOpen.set(false);
+            this.dialogRef = undefined;
+        });
+    }
+    seekTo(id) {
+        if (!this.scrollOnClick) {
+            return;
+        }
+        this.isSeeking = true;
+        clearTimeout(this.seekingTimeout);
+        this.seekingTimeout = setTimeout(() => {
+            this.isSeeking = false;
+        }, 500);
+        if (!id) {
+            this.router.navigate([], {
+                fragment: undefined,
+                queryParamsHandling: "preserve",
+            });
+            return;
+        }
+        const targetElement = document.getElementById(id);
+        targetElement?.scrollIntoView({ behavior: "smooth" });
+        this.router.navigate([], {
+            fragment: id,
+            queryParamsHandling: "preserve",
+        });
+    }
+    hookItems(items) {
+        items.forEach((item) => {
+            item.itemSelected.pipe(takeUntil(this.update$)).subscribe(() => {
+                item.selected.set(true);
+                this.dialogRef?.close();
+                items.forEach((other) => {
+                    if (other !== item) {
+                        other.selected.set(false);
+                    }
+                });
+                this.seekTo(item.idTo());
+            });
+        });
+    }
+    hookObservers(items) {
+        const observer = new IntersectionObserver(() => this.observerCallback(), {
+            rootMargin: "0px 0px 0px 0px",
+        });
+        items.forEach((item) => {
+            const id = item.idTo();
+            if (!id) {
+                return;
+            }
+            const element = document.getElementById(id);
+            if (!element) {
+                return;
+            }
+            observer.observe(element);
+        });
+        this.intersectionObservers.push(observer);
+    }
+    observerCallback() {
+        if (!this.scrollAware() || this.isSeeking) {
+            return;
+        }
+        const items = [...this.tableItems()];
+        // select the topmost screen item
+        items.sort((a, b) => {
+            const aElement = document.getElementById(a.idTo());
+            const bElement = document.getElementById(b.idTo());
+            if (!aElement || !bElement) {
+                return 0;
+            }
+            const aRect = aElement.getBoundingClientRect();
+            const bRect = bElement.getBoundingClientRect();
+            return aRect.top - bRect.top;
+        });
+        for (const item of items) {
+            const element = document.getElementById(item.idTo());
+            if (!element) {
+                continue;
+            }
+            const rect = element.getBoundingClientRect();
+            const top = rect.top;
+            const bottom = rect.bottom;
+            if (top >= 0 && bottom <= window.innerHeight) {
+                this.activeElement()?.selected.set(false);
+                item.selected.set(true);
+                break;
+            }
+        }
+    }
+    cleanupObservers() {
+        this.intersectionObservers.forEach((obs) => obs.disconnect());
+        this.intersectionObservers = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card>\n      <tedi-card-content class=\"table-of-contents__content\">\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--dimensions-10)}.table-of-contents__header{width:100%;padding:var(--dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media (min-width: 576px){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media (min-width: 768px){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media (min-width: 992px){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--dimensions-10)}@media (min-width: 576px){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media (min-width: 768px){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media (min-width: 992px){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-table-of-contents", imports: [
+                        CardComponent$1,
+                        CardContentComponent$1,
+                        TextComponent,
+                        ButtonComponent,
+                        IconComponent,
+                        TediTranslationPipe,
+                        NgTemplateOutlet,
+                    ], template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card>\n      <tedi-card-content class=\"table-of-contents__content\">\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--dimensions-10)}.table-of-contents__header{width:100%;padding:var(--dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media (min-width: 576px){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media (min-width: 768px){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media (min-width: 992px){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--dimensions-10)}@media (min-width: 576px){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media (min-width: 768px){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media (min-width: 992px){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Wrapper component for nested table of contents items.
+ * Workaround for https://github.com/angular/angular/issues/57345,
+ * which is a issue when you use `@if() {}` syntax inside a component that uses ng-content.
+ */
+class TableOfContentsNestedWrapperComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsNestedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TableOfContentsNestedWrapperComponent, isStandalone: true, selector: "tedi-table-of-contents-nested-wrapper", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableOfContentsNestedWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tedi-table-of-contents-nested-wrapper",
+                    template: `<ng-content></ng-content>`,
+                }]
+        }] });
+
 class TabContentComponent {
     tabId = input.required();
     content = viewChild.required("content");
@@ -2973,5 +3219,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileSizeStandards, FloatingButtonComponent, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
+export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileSizeStandards, FloatingButtonComponent, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsNestedWrapperComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
 //# sourceMappingURL=tedi-design-system-angular-community.mjs.map