@porscheinformatik/material-addons 22.0.7 → 22.0.9

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, Component, NgModule, HostBinding, ElementRef, ViewChild, Input, Optional, Directive, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, computed, signal, ChangeDetectionStrategy, EventEmitter, Output, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf, ContentChildren, ViewEncapsulation, QueryList } from '@angular/core';
+import { input, Component, NgModule, HostBinding, ElementRef, ViewChild, Input, Optional, Directive, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, computed, signal, ChangeDetectionStrategy, EventEmitter, Output, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf, ContentChildren, ViewEncapsulation, QueryList, contentChildren, effect } from '@angular/core';
 import * as i2$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as i1 from '@angular/material/button';
@@ -56,6 +56,7 @@ import * as i1$6 from '@angular/cdk/a11y';
 import * as i1$7 from '@angular/cdk/bidi';
 import * as i1$8 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
+import EmblaCarousel from 'embla-carousel';
 import * as i9 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$a from '@angular/cdk/layout';
@@ -3675,6 +3676,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
+class CarouselShortTextDirective {
+    constructor() {
+        this.text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), alias: 'madCarouselShortText' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselShortTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: CarouselShortTextDirective, isStandalone: true, selector: "[madCarouselShortText]", inputs: { text: { classPropertyName: "text", publicName: "madCarouselShortText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselShortTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madCarouselShortText]',
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "madCarouselShortText", required: false }] }] } });
+
+class CarouselSlideDirective {
+    constructor() {
+        this.carousel = inject(CarouselComponent);
+    }
+    get hostClasses() {
+        const loop = !!this.carousel.options()?.loop;
+        const base = 'flex min-w-0 min-h-fit flex-[0_0_100%] items-center justify-center';
+        const border = this.carousel.useSlideBorder() ? ' border border-gray-400' : '';
+        const loopMargin = loop ? ' ml-4' : '';
+        return base + border + loopMargin;
+    }
+    get hostHeight() {
+        return this.carousel.slideHeight();
+    }
+    get hostBorderRadius() {
+        return this.carousel.slideBorderRadius();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: CarouselSlideDirective, isStandalone: true, selector: "[madCarouselSlide]", host: { properties: { "class": "this.hostClasses", "style.height": "this.hostHeight", "style.border-radius": "this.hostBorderRadius" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madCarouselSlide]',
+                }]
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], hostBorderRadius: [{
+                type: HostBinding,
+                args: ['style.border-radius']
+            }] } });
+
+class CarouselComponent {
+    constructor() {
+        this.shortTexts = contentChildren(CarouselShortTextDirective, ...(ngDevMode ? [{ debugName: "shortTexts" }] : []));
+        this.slides = contentChildren(CarouselSlideDirective, ...(ngDevMode ? [{ debugName: "slides" }] : []));
+        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.width = input('50%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.slideHeight = input('12rem', ...(ngDevMode ? [{ debugName: "slideHeight" }] : []));
+        this.slideBorderRadius = input('5px', ...(ngDevMode ? [{ debugName: "slideBorderRadius" }] : []));
+        this.useSlideBorder = input(true, ...(ngDevMode ? [{ debugName: "useSlideBorder" }] : []));
+        this.viewportRef = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewportRef" }] : []));
+        this.containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : []));
+        this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+        this.scrollSnaps = signal([], ...(ngDevMode ? [{ debugName: "scrollSnaps" }] : []));
+        this.prevBtnDisabled = signal(true, ...(ngDevMode ? [{ debugName: "prevBtnDisabled" }] : []));
+        this.nextBtnDisabled = signal(true, ...(ngDevMode ? [{ debugName: "nextBtnDisabled" }] : []));
+        this.containerLoopClass = computed(() => (this.options()?.loop ? '-mr-4' : ''), ...(ngDevMode ? [{ debugName: "containerLoopClass" }] : []));
+        effect(() => this.initEmbla());
+        effect(() => {
+            const slideCount = this.slides().length;
+            if (slideCount > 0) {
+                this.validateShortTexts(slideCount);
+            }
+        });
+    }
+    initEmbla() {
+        this.emblaApi = EmblaCarousel(this.viewportRef().nativeElement, this.options());
+        this.onInit();
+        this.onSelect();
+        this.emblaApi.on('select', () => this.onSelect());
+        this.emblaApi.on('reInit', () => {
+            this.onInit();
+            this.onSelect();
+        });
+    }
+    validateShortTexts(slideCount) {
+        const shortTextCount = this.shortTexts().length;
+        if (shortTextCount > 0 && shortTextCount !== slideCount) {
+            console.error(`Found ${slideCount} slides but only ${shortTextCount} slides provide the \`carouselShortText\` directive! Make sure that either none, or all slides provide this value!`);
+        }
+    }
+    onInit() {
+        if (!this.emblaApi)
+            return;
+        this.selectedIndex.set(this.emblaApi.selectedScrollSnap());
+        this.scrollSnaps.set(this.emblaApi.scrollSnapList());
+        this.prevBtnDisabled.set(!this.emblaApi.canScrollPrev());
+        this.nextBtnDisabled.set(!this.emblaApi.canScrollNext());
+    }
+    onSelect() {
+        if (!this.emblaApi)
+            return;
+        this.selectedIndex.set(this.emblaApi.selectedScrollSnap());
+        this.prevBtnDisabled.set(!this.emblaApi.canScrollPrev());
+        this.nextBtnDisabled.set(!this.emblaApi.canScrollNext());
+    }
+    scrollNext() {
+        this.emblaApi?.scrollNext();
+    }
+    scrollPrev() {
+        this.emblaApi?.scrollPrev();
+    }
+    scrollTo(index) {
+        this.emblaApi?.scrollTo(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CarouselComponent, isStandalone: true, selector: "mad-carousel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, slideHeight: { classPropertyName: "slideHeight", publicName: "slideHeight", isSignal: true, isRequired: false, transformFunction: null }, slideBorderRadius: { classPropertyName: "slideBorderRadius", publicName: "slideBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, useSlideBorder: { classPropertyName: "useSlideBorder", publicName: "useSlideBorder", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "shortTexts", predicate: CarouselShortTextDirective, isSignal: true }, { propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"h-fit min-w-fit\" [style.width]=\"width()\">\n  <div class=\"flex flex-row items-center justify-center gap-4\">\n    <button\n      class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n      [disabled]=\"prevBtnDisabled()\"\n      (click)=\"scrollPrev()\"\n    >\n      <span class=\"material-symbols-outlined\">chevron_left</span>\n    </button>\n\n    <div class=\"flex-1 w-0 min-w-0 overflow-hidden\" #viewport>\n      <div class=\"flex flex-row gap-4 w-full touch-pan-y touch-pinch-zoom\" [class]=\"containerLoopClass()\" #container>\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <button\n      class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n      [disabled]=\"nextBtnDisabled()\"\n      (click)=\"scrollNext()\"\n    >\n      <span class=\"material-symbols-outlined\">chevron_right</span>\n    </button>\n  </div>\n\n  @let slideTexts = shortTexts();\n  @let shouldDisplaySlideText = slideTexts.length > 0;\n  <div class=\"flex gap-4 height-8 padding-x-4 mt-5 justify-center\">\n    @for (snap of scrollSnaps(); let i = $index; track snap) {\n      <button\n        (click)=\"scrollTo(i)\"\n        class=\"inline-flex items-center justify-center rounded-full border border-[0.1rem] border-(--carousel-dots-border-color) cursor-pointer hover:border-(carousel-dots-hover-border-color) transition-transform mx-w-6 max-h-6\"\n        [class.scale-120]=\"i === selectedIndex()\"\n        [class.border-gray-950]=\"i === selectedIndex()\"\n        [class.py-1]=\"shouldDisplaySlideText\"\n        [class.px-2]=\"shouldDisplaySlideText\"\n        [class.size-4]=\"!shouldDisplaySlideText\"\n      >\n        @if (shouldDisplaySlideText) {\n          {{ slideTexts[i]?.text() }}\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;--slide-spacing: 1rem}button>.material-symbols-outlined{display:flex;align-items:center;justify-content:center;font-variation-settings:\"wght\" 300,\"FILL\" 0,\"GRAD\" 0,\"opsz\" 24;font-size:1.2rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-carousel', imports: [], template: "<div class=\"h-fit min-w-fit\" [style.width]=\"width()\">\n  <div class=\"flex flex-row items-center justify-center gap-4\">\n    <button\n      class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n      [disabled]=\"prevBtnDisabled()\"\n      (click)=\"scrollPrev()\"\n    >\n      <span class=\"material-symbols-outlined\">chevron_left</span>\n    </button>\n\n    <div class=\"flex-1 w-0 min-w-0 overflow-hidden\" #viewport>\n      <div class=\"flex flex-row gap-4 w-full touch-pan-y touch-pinch-zoom\" [class]=\"containerLoopClass()\" #container>\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <button\n      class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n      [disabled]=\"nextBtnDisabled()\"\n      (click)=\"scrollNext()\"\n    >\n      <span class=\"material-symbols-outlined\">chevron_right</span>\n    </button>\n  </div>\n\n  @let slideTexts = shortTexts();\n  @let shouldDisplaySlideText = slideTexts.length > 0;\n  <div class=\"flex gap-4 height-8 padding-x-4 mt-5 justify-center\">\n    @for (snap of scrollSnaps(); let i = $index; track snap) {\n      <button\n        (click)=\"scrollTo(i)\"\n        class=\"inline-flex items-center justify-center rounded-full border border-[0.1rem] border-(--carousel-dots-border-color) cursor-pointer hover:border-(carousel-dots-hover-border-color) transition-transform mx-w-6 max-h-6\"\n        [class.scale-120]=\"i === selectedIndex()\"\n        [class.border-gray-950]=\"i === selectedIndex()\"\n        [class.py-1]=\"shouldDisplaySlideText\"\n        [class.px-2]=\"shouldDisplaySlideText\"\n        [class.size-4]=\"!shouldDisplaySlideText\"\n      >\n        @if (shouldDisplaySlideText) {\n          {{ slideTexts[i]?.text() }}\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;--slide-spacing: 1rem}button>.material-symbols-outlined{display:flex;align-items:center;justify-content:center;font-variation-settings:\"wght\" 300,\"FILL\" 0,\"GRAD\" 0,\"opsz\" 24;font-size:1.2rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { shortTexts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselShortTextDirective), { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], slideHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideHeight", required: false }] }], slideBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideBorderRadius", required: false }] }], useSlideBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSlideBorder", required: false }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
+
 class SidebarComponent {
     constructor() {
         this.collapsed = false;
@@ -4016,7 +4139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class MaterialAddonsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, exports: [ReadOnlyFormFieldModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, imports: [CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective], exports: [ReadOnlyFormFieldModule,
             ButtonModule,
             ToolbarModule,
             MaterialActionButtonModule,
@@ -4024,7 +4147,10 @@ class MaterialAddonsModule {
             CardModule,
             QuickListModule,
             ThrottleClickModule,
-            SidebarModule] }); }
+            SidebarModule,
+            CarouselComponent,
+            CarouselShortTextDirective,
+            CarouselSlideDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, imports: [ReadOnlyFormFieldModule,
             ButtonModule,
             ToolbarModule,
@@ -4038,6 +4164,7 @@ class MaterialAddonsModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, decorators: [{
             type: NgModule,
             args: [{
+                    imports: [CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective],
                     exports: [
                         ReadOnlyFormFieldModule,
                         ButtonModule,
@@ -4048,6 +4175,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         QuickListModule,
                         ThrottleClickModule,
                         SidebarModule,
+                        CarouselComponent,
+                        CarouselShortTextDirective,
+                        CarouselSlideDirective,
                     ],
                 }]
         }] });
@@ -4188,7 +4318,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'mad-file-upload', imports: [MatCardModule, MatIconModule, ButtonModule, TranslateModule, DragAndDropDirective, MatChipsModule], template: "<mat-card\n  id=\"uploadFileContainer\"\n  class=\"upload-file-container\"\n  (click)=\"fileInput.click()\"\n  madDragAndDrop\n  (onFileDropped)=\"uploadFile($event)\"\n>\n  <input\n    #fileInput\n    hidden\n    type=\"file\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [accept]=\"acceptAttribute()\"\n    (change)=\"uploadFile(fileInput.files)\"\n    (click)=\"fileInput.value = ''\"\n  />\n  <mat-card-content class=\"upload-file-content\">\n    @if (hasSingleFile()) {\n      {{ fileList()[0].name }}\n    } @else {\n      <mat-icon>vertical_align_top</mat-icon>\n      {{ uploadLabel() }}\n    }\n  </mat-card-content>\n</mat-card>\n\n@if (showFileList()) {\n  <mat-chip-listbox>\n    @for (file of fileList(); track file) {\n      <mat-chip class=\"download\" (click)=\"openFile(file)\" [removable]=\"removable()\" (removed)=\"remove(file)\">\n        {{ file.name }}\n        @if (removable()) {\n          <mat-icon matChipRemove>delete_forever</mat-icon>\n        }\n      </mat-chip>\n    }\n  </mat-chip-listbox>\n}\n", styles: [".upload-file-container{height:100px;margin:0;border:2px dashed var(--main-primary);background-repeat:no-repeat;background-position:center}.upload-file-container:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.upload-file-container,.upload-file-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fileEmitter: [{ type: i0.Output, args: ["fileEmitter"] }], errorEmitter: [{ type: i0.Output, args: ["errorEmitter"] }] } });
 
-const VERSION = '22.0.7';
+class TileComponent {
+    constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /** Optional Material icon name */
+        this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /** Icon position relative to label */
+        this.iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TileComponent, isStandalone: true, selector: "mad-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"tile\"\n  [class.tile--success]=\"variant() === 'success'\"\n  [class.tile--error]=\"variant() === 'error'\"\n  [class.tile--info]=\"variant() === 'info'\"\n  [class.tile--warning]=\"variant() === 'warning'\"\n  [class.tile--sm]=\"size() === 'sm'\"\n  [class.tile--md]=\"size() === 'md'\"\n  [class.tile--lg]=\"size() === 'lg'\"\n  [class.tile--icon-end]=\"iconPosition() === 'end'\"\n>\n  <div class=\"tile__content\">\n    @if (icon() && iconPosition() === 'start') {\n      <mat-icon class=\"tile__icon\" aria-hidden=\"true\">\n        {{ icon() }}\n      </mat-icon>\n    }\n\n    <span class=\"tile__label\">\n      {{ label() }}\n    </span>\n\n    @if (icon() && iconPosition() === 'end') {\n      <mat-icon class=\"tile__icon\" aria-hidden=\"true\">\n        {{ icon() }}\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block;min-width:0;font-family:inherit}.tile{display:inline-flex;align-items:center;justify-content:center;min-width:0;border-radius:var(--mat-sys-corner-full);box-sizing:border-box;text-align:center;white-space:nowrap;background-color:var(--tile-bg);color:var(--tile-color)}.tile__content{display:inline-flex;align-items:center;gap:8px}.tile__label{font-weight:500;line-height:1}.tile__icon{flex:0 0 auto;width:1em;height:1em}.tile--sm{height:24px;padding:0 8px}.tile--md{height:32px;padding:0 12px}.tile--lg{height:48px;padding:0 16px}.tile--sm .tile__label{font-size:12px}.tile--md .tile__label{font-size:14px}.tile--lg .tile__label,.tile--sm .tile__icon{font-size:16px}.tile--md .tile__icon{font-size:18px}.tile--lg .tile__icon{font-size:22px}.tile--success{--tile-bg: var(--tile-success-bg, #e8eee3);--tile-color: var(--tile-success-color, #3e982f)}.tile--error{--tile-bg: var(--tile-error-bg, #f1e2e4);--tile-color: var(--tile-error-color, #d53510)}.tile--info{--tile-bg: var(--tile-info-bg, #dfe7ec);--tile-color: var(--tile-info-color, #145d8b)}.tile--warning{--tile-bg: var(--tile-warning-bg, #ebe6dc);--tile-color: var(--tile-warning-color, #c2881d)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-tile', imports: [MatIcon], template: "<div\n  class=\"tile\"\n  [class.tile--success]=\"variant() === 'success'\"\n  [class.tile--error]=\"variant() === 'error'\"\n  [class.tile--info]=\"variant() === 'info'\"\n  [class.tile--warning]=\"variant() === 'warning'\"\n  [class.tile--sm]=\"size() === 'sm'\"\n  [class.tile--md]=\"size() === 'md'\"\n  [class.tile--lg]=\"size() === 'lg'\"\n  [class.tile--icon-end]=\"iconPosition() === 'end'\"\n>\n  <div class=\"tile__content\">\n    @if (icon() && iconPosition() === 'start') {\n      <mat-icon class=\"tile__icon\" aria-hidden=\"true\">\n        {{ icon() }}\n      </mat-icon>\n    }\n\n    <span class=\"tile__label\">\n      {{ label() }}\n    </span>\n\n    @if (icon() && iconPosition() === 'end') {\n      <mat-icon class=\"tile__icon\" aria-hidden=\"true\">\n        {{ icon() }}\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block;min-width:0;font-family:inherit}.tile{display:inline-flex;align-items:center;justify-content:center;min-width:0;border-radius:var(--mat-sys-corner-full);box-sizing:border-box;text-align:center;white-space:nowrap;background-color:var(--tile-bg);color:var(--tile-color)}.tile__content{display:inline-flex;align-items:center;gap:8px}.tile__label{font-weight:500;line-height:1}.tile__icon{flex:0 0 auto;width:1em;height:1em}.tile--sm{height:24px;padding:0 8px}.tile--md{height:32px;padding:0 12px}.tile--lg{height:48px;padding:0 16px}.tile--sm .tile__label{font-size:12px}.tile--md .tile__label{font-size:14px}.tile--lg .tile__label,.tile--sm .tile__icon{font-size:16px}.tile--md .tile__icon{font-size:18px}.tile--lg .tile__icon{font-size:22px}.tile--success{--tile-bg: var(--tile-success-bg, #e8eee3);--tile-color: var(--tile-success-color, #3e982f)}.tile--error{--tile-bg: var(--tile-error-bg, #f1e2e4);--tile-color: var(--tile-error-color, #d53510)}.tile--info{--tile-bg: var(--tile-info-bg, #dfe7ec);--tile-color: var(--tile-info-color, #145d8b)}.tile--warning{--tile-bg: var(--tile-warning-bg, #ebe6dc);--tile-color: var(--tile-warning-color, #c2881d)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }] } });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.breadcrumbs = input.required(...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
+        this.showCopy = input(false, ...(ngDevMode ? [{ debugName: "showCopy" }] : []));
+        this.title = input('Copy', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.copy = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BreadcrumbComponent, isStandalone: true, selector: "mad-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null }, showCopy: { classPropertyName: "showCopy", publicName: "showCopy", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy" }, ngImport: i0, template: "@if (breadcrumbs().length) {\n  <div class=\"breadcrumb\">\n    <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n      @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n        @if (crumb.route?.length) {\n          <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else if (crumb.href?.length) {\n          <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else {\n          <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n        }\n        @if (!last) {\n          <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n        }\n      }\n    </nav>\n    @if (showCopy()) {\n      <mad-icon-button\n        data-cy=\"breadcrumb-copy\"\n        class=\"breadcrumb__copy\"\n        (click)=\"copy.emit()\"\n        [matTooltip]=\"title()\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon>content_copy</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-breadcrumb', imports: [RouterLink, IconButtonComponent, MatIcon, MatTooltip], template: "@if (breadcrumbs().length) {\n  <div class=\"breadcrumb\">\n    <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n      @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n        @if (crumb.route?.length) {\n          <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else if (crumb.href?.length) {\n          <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else {\n          <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n        }\n        @if (!last) {\n          <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n        }\n      }\n    </nav>\n    @if (showCopy()) {\n      <mad-icon-button\n        data-cy=\"breadcrumb-copy\"\n        class=\"breadcrumb__copy\"\n        (click)=\"copy.emit()\"\n        [matTooltip]=\"title()\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon>content_copy</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"] }]
+        }], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: true }] }], showCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopy", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }] } });
+
+const VERSION = '22.0.8';
 
 const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
     providedIn: 'root',
@@ -4244,5 +4407,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
+export { AlertComponent, BaseQuickListComponent, BreadcrumbComponent, ButtonModule, CardComponent, CardModule, CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, TileComponent, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
 //# sourceMappingURL=porscheinformatik-material-addons.mjs.map