@tedi-design-system/angular 7.1.0-rc.4 → 7.1.0-rc.5

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

@@ -1667,6 +1667,13 @@ const translationsMap = {
         en: "Breadcrumbs",
         ru: "Навигационная цепочка",
     },
+    "breadcrumbs.show-more": {
+        description: "Label for the collapsed-crumbs ellipsis button in breadcrumbs",
+        components: ["Breadcrumbs"],
+        et: "Näita rohkem",
+        en: "Show more",
+        ru: "Показать больше",
+    },
     more: {
         components: ["Tabs"],
         et: "Veel",
@@ -17095,14 +17102,14 @@ class LinkComponent {
         return classList.join(" ");
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: LinkComponent, isStandalone: true, selector: "[tedi-link]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", 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": "classes()", "attr.tabIndex": "0" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"], dependencies: [{ kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: LinkComponent, isStandalone: true, selector: "[tedi-link]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", 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": "classes()", "attr.tabIndex": "0" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link:where(button){padding:0;font:inherit;text-align:inherit;appearance:none;background:none;border:0}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"], dependencies: [{ kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
             args: [{ selector: "[tedi-link]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [TediTranslationPipe], host: {
                         "[class]": "classes()",
                         "[attr.tabIndex]": "0",
-                    }, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"] }]
+                    }, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link:where(button){padding:0;font:inherit;text-align:inherit;appearance:none;background:none;border:0}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", 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 FooterBottomComponent {
@@ -18614,6 +18621,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ["click"]
             }] } });
 
+/**
+ * Marks a projected element as a single breadcrumb. Apply as a structural
+ * directive on the crumb element; `tedi-breadcrumbs` collects each one and
+ * renders it into the trail, inserting separators between them.
+ *
+ * Use a link (e.g. `a tedi-link`) for navigable crumbs and a plain element
+ * (e.g. `span`) for the current page — add `aria-current="page"` to it yourself.
+ */
+class BreadcrumbItemDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: BreadcrumbItemDirective, isStandalone: true, selector: "[tediBreadcrumbItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediBreadcrumbItem]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Optional custom separator for `tedi-breadcrumbs`. Provide as a template to
+ * render arbitrary content between crumbs; takes precedence over the
+ * `separator` string input and the default chevron icon.
+ */
+class BreadcrumbSeparatorDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: BreadcrumbSeparatorDirective, isStandalone: true, selector: "[tediBreadcrumbSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediBreadcrumbSeparator]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Breadcrumbs show the user's location within the page hierarchy. Each child
+ * marked with `*tediBreadcrumbItem` becomes one crumb, in order from the root
+ * to the current page; chevron separators are inserted between them.
+ *
+ * Use a link (e.g. `a tedi-link`) for navigable crumbs and a plain element for
+ * the current page — add `aria-current="page"` to it yourself.
+ *
+ * Crumb links are underlined by default. Set `[underline]="false"` on the
+ * `tedi-link` for non-underlined crumbs — recommended for the `short` back-link.
+ * Crumbs collapsed into the ellipsis dropdown are always rendered without an
+ * underline, regardless of their `[underline]` setting.
+ */
+class BreadcrumbsComponent {
+    breakpointService = inject(BreakpointService);
+    items = contentChildren(BreadcrumbItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    separatorTemplate = contentChild(BreadcrumbSeparatorDirective, ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : []));
+    /** Accessible label for the `nav` landmark. Falls back to the `breadcrumbs` translation. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /** Accessible label for the ellipsis button that opens the collapsed-crumbs dropdown. Falls back to the `breadcrumbs.show-more` translation. */
+    showMoreLabel = input(...(ngDevMode ? [undefined, { debugName: "showMoreLabel" }] : []));
+    /** Separator between crumbs. Defaults to a chevron icon; a `[tediBreadcrumbSeparator]` template overrides this. */
+    separator = input(...(ngDevMode ? [undefined, { debugName: "separator" }] : []));
+    /** `long` shows the full trail; `short` shows only the parent crumb as a back-link. Defaults to `long`. */
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+    /** Max crumbs before the middle collapses into an ellipsis dropdown. Long variant only; omit to render all. */
+    maxItems = input(...(ngDevMode ? [undefined, { debugName: "maxItems" }] : []));
+    /** Crumbs kept visible at the start of the trail when collapsed. Defaults to `1`. */
+    itemsBeforeCollapse = input(...(ngDevMode ? [undefined, { debugName: "itemsBeforeCollapse" }] : []));
+    /** Crumbs kept visible at the end of the trail when collapsed. Defaults to `1`. */
+    itemsAfterCollapse = input(...(ngDevMode ? [undefined, { debugName: "itemsAfterCollapse" }] : []));
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    resolved = computed(() => this.breakpointService.getBreakpointInputs({
+        variant: this.variant(),
+        maxItems: this.maxItems(),
+        itemsBeforeCollapse: this.itemsBeforeCollapse(),
+        itemsAfterCollapse: this.itemsAfterCollapse(),
+        xs: this.xs(),
+        sm: this.sm(),
+        md: this.md(),
+        lg: this.lg(),
+        xl: this.xl(),
+        xxl: this.xxl(),
+    }), ...(ngDevMode ? [{ debugName: "resolved" }] : []));
+    currentVariant = computed(() => this.resolved().variant ?? "long", ...(ngDevMode ? [{ debugName: "currentVariant" }] : []));
+    parentItem = computed(() => {
+        const items = this.items();
+        return items.length > 1 ? items[items.length - 2] : null;
+    }, ...(ngDevMode ? [{ debugName: "parentItem" }] : []));
+    visible = computed(() => {
+        if (this.items().length === 0)
+            return false;
+        if (this.currentVariant() === "short")
+            return this.parentItem() !== null;
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    tokens = computed(() => {
+        const items = this.items();
+        if (items.length === 0)
+            return [];
+        const resolved = this.resolved();
+        const before = Math.max(0, resolved.itemsBeforeCollapse ?? 1);
+        // Keep at least one trailing crumb so the current page is never collapsed.
+        const after = Math.max(1, resolved.itemsAfterCollapse ?? 1);
+        const lastIndex = items.length - 1;
+        const shouldCollapse = resolved.maxItems !== undefined &&
+            items.length > resolved.maxItems &&
+            items.length > before + after;
+        if (!shouldCollapse) {
+            return items.map((item, index) => ({
+                kind: "item",
+                item,
+                current: index === lastIndex,
+            }));
+        }
+        const tail = items.slice(items.length - after);
+        return [
+            ...items
+                .slice(0, before)
+                .map((item) => ({ kind: "item", item, current: false })),
+            {
+                kind: "ellipsis",
+                hidden: items.slice(before, items.length - after),
+            },
+            ...tail.map((item, index) => ({
+                kind: "item",
+                item,
+                current: index === tail.length - 1,
+            })),
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tokens" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMoreLabel: { classPropertyName: "showMoreLabel", publicName: "showMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", 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: { classAttribute: "tedi-breadcrumbs" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemDirective, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-breadcrumbs", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        IconComponent,
+                        TextComponent,
+                        LinkComponent,
+                        DropdownComponent,
+                        DropdownTriggerDirective,
+                        DropdownContentComponent,
+                        DropdownItemComponent,
+                        TediTranslationPipe,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-breadcrumbs",
+                    }, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"] }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemDirective), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", 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 HorizontalStepperItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
@@ -19109,5 +19271,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map