@porscheinformatik/material-addons 22.0.8 → 22.0.9

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -1,5 +1,5 @@
 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, MatIcon } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
@@ -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,
                     ],
                 }]
         }] });
@@ -4277,5 +4407,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BaseQuickListComponent, BreadcrumbComponent, 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, TileComponent, 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