@kirbydesign/designsystem 11.11.4 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-slide.mjs

@@ -1,160 +1,362 @@
-import * as i0 from '@angular/core';
-import { Directive, EventEmitter, TemplateRef, Output, Input, ContentChild, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { register } from 'swiper/element/bundle';
-import * as i1 from '@kirbydesign/designsystem/helpers';
-import { UniqueIdGenerator, DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
-import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
-import * as i2 from '@kirbydesign/designsystem/shared';
-
-class SlideDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: SlideDirective, isStandalone: true, selector: "[kirbySlide]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbySlide]' }]
-        }] });
-
-// Swiper is not an Angular library,
-// so we need to use their web components and register them manually.
-// https://swiperjs.com/element
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ContentChild, Directive, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild } from "@angular/core";
+import { register } from "swiper/element/bundle";
+import * as i1 from "@kirbydesign/designsystem/helpers";
+import { DesignTokenHelper, UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
+import { CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import { ButtonComponent } from "@kirbydesign/designsystem/button";
+import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
+import * as i2 from "@kirbydesign/designsystem/shared";
+var SlideDirective = class SlideDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlideDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: SlideDirective,
+			isStandalone: true,
+			selector: "[kirbySlide]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SlideDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbySlide]" }]
+	}]
+});
 register();
-class SlidesComponent {
-    constructor(platform, cdr, translations) {
-        this.platform = platform;
-        this.cdr = cdr;
-        this.translations = translations;
-        this.showNavigation = true;
-        this.slideChange = new EventEmitter();
-        this._paginationId = UniqueIdGenerator.scopedTo('pagination').next();
-        this._prevButtonId = UniqueIdGenerator.scopedTo('swiper-button-prev').next();
-        this._nextButtonId = UniqueIdGenerator.scopedTo('swiper-button-next').next();
-    }
-    ngOnInit() {
-        this._isTouch = this.platform.isTouch();
-    }
-    ngAfterViewInit() {
-        const defaultConfig = this.showNavigation
-            ? this.getDefaultConfig()
-            : this.getNoControlsConfig();
-        const config = { ...defaultConfig, ...this.slidesOptions };
-        Object.assign(this.swiperContainer.nativeElement, config);
-        this.swiperContainer.nativeElement.initialize();
-    }
-    slideTo(index) {
-        this.swiperContainer.nativeElement.swiper.slideTo(index);
-    }
-    ngOnChanges(changes) {
-        if (changes.slides?.firstChange === false) {
-            this.cdr.detectChanges();
-            this.swiperContainer.nativeElement.swiper.updateSlides();
-        }
-    }
-    getDefaultConfig() {
-        const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);
-        const spaceBetween = parseInt(DesignTokenHelper.size('s'));
-        const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));
-        return {
-            centeredSlides: true,
-            centeredSlidesBounds: true,
-            slidesPerView: 1.2,
-            slidesPerGroup: 1,
-            breakpoints: {
-                [desktopBreakpoint]: {
-                    centeredSlides: false,
-                    slidesPerView: 3,
-                    slidesPerGroup: 3,
-                },
-            },
-            spaceBetween: spaceBetween,
-            speed: transitionDuration,
-            pagination: {
-                el: `.${this._paginationId}`,
-                type: 'bullets',
-            },
-            navigation: {
-                nextEl: `.${this._nextButtonId}`,
-                prevEl: `.${this._prevButtonId}`,
-                addIcons: false,
-            },
-            on: {
-                slideChange: (swiper) => {
-                    this.slideChange.emit({
-                        slide: this.slides[swiper.activeIndex],
-                        index: swiper.activeIndex,
-                    });
-                },
-            },
-            a11y: {
-                prevSlideMessage: this.translations.get('previousSlide'),
-                nextSlideMessage: this.translations.get('nextSlide'),
-            },
-        };
-    }
-    getNoControlsConfig() {
-        return { ...this.getDefaultConfig(), pagination: false, navigation: false };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SlidesComponent, isStandalone: true, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:4px;border-radius:999px;background:var(--kirby-black);opacity:.2}:host .pagination ::ng-deep .swiper-pagination-bullet-active{opacity:1}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:24px;margin-block:-24px}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:16px}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:clamp(14px,1.125rem,35px);font-weight:700;line-height:1.3334}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlidesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:4px;border-radius:999px;background:var(--kirby-black);opacity:.2}:host .pagination ::ng-deep .swiper-pagination-bullet-active{opacity:1}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:24px;margin-block:-24px}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:16px}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:clamp(14px,1.125rem,35px);font-weight:700;line-height:1.3334}\n"] }]
-        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
-                type: ViewChild,
-                args: ['swiperContainer']
-            }], slideTemplate: [{
-                type: ContentChild,
-                args: [SlideDirective, { static: true, read: TemplateRef }]
-            }], slidesOptions: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], slides: [{
-                type: Input
-            }], showNavigation: [{
-                type: Input
-            }], slideChange: [{
-                type: Output
-            }] } });
-
-class SlideStretchHeightDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: SlideStretchHeightDirective, isStandalone: true, selector: "[slideStretchHeight]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[slideStretchHeight]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-const imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
-class SlideModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent, SlideDirective, SlideStretchHeightDirective], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, ButtonComponent, IconModule, ...imports],
-                    exports: [...imports],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SlidesComponent = class SlidesComponent {
+	constructor(platform, cdr, translations) {
+		this.platform = platform;
+		this.cdr = cdr;
+		this.translations = translations;
+		this.showNavigation = true;
+		this.slideChange = new EventEmitter();
+		this._paginationId = UniqueIdGenerator.scopedTo("pagination").next();
+		this._prevButtonId = UniqueIdGenerator.scopedTo("swiper-button-prev").next();
+		this._nextButtonId = UniqueIdGenerator.scopedTo("swiper-button-next").next();
+	}
+	ngOnInit() {
+		this._isTouch = this.platform.isTouch();
+	}
+	ngAfterViewInit() {
+		const config = {
+			...this.showNavigation ? this.getDefaultConfig() : this.getNoControlsConfig(),
+			...this.slidesOptions
+		};
+		Object.assign(this.swiperContainer.nativeElement, config);
+		this.swiperContainer.nativeElement.initialize();
+	}
+	slideTo(index) {
+		this.swiperContainer.nativeElement.swiper.slideTo(index);
+	}
+	ngOnChanges(changes) {
+		if (changes.slides?.firstChange === false) {
+			this.cdr.detectChanges();
+			this.swiperContainer.nativeElement.swiper.updateSlides();
+		}
+	}
+	getDefaultConfig() {
+		const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);
+		const spaceBetween = parseInt(DesignTokenHelper.size("s"));
+		const transitionDuration = parseInt(DesignTokenHelper.transitionDuration("long"));
+		return {
+			centeredSlides: true,
+			centeredSlidesBounds: true,
+			slidesPerView: 1.2,
+			slidesPerGroup: 1,
+			breakpoints: { [desktopBreakpoint]: {
+				centeredSlides: false,
+				slidesPerView: 3,
+				slidesPerGroup: 3
+			} },
+			spaceBetween,
+			speed: transitionDuration,
+			pagination: {
+				el: `.${this._paginationId}`,
+				type: "bullets"
+			},
+			navigation: {
+				nextEl: `.${this._nextButtonId}`,
+				prevEl: `.${this._prevButtonId}`,
+				addIcons: false
+			},
+			on: { slideChange: (swiper) => {
+				this.slideChange.emit({
+					slide: this.slides[swiper.activeIndex],
+					index: swiper.activeIndex
+				});
+			} },
+			a11y: {
+				prevSlideMessage: this.translations.get("previousSlide"),
+				nextSlideMessage: this.translations.get("nextSlide")
+			}
+		};
+	}
+	getNoControlsConfig() {
+		return {
+			...this.getDefaultConfig(),
+			pagination: false,
+			navigation: false
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlidesComponent,
+			deps: [
+				{ token: i1.PlatformService },
+				{ token: i0.ChangeDetectorRef },
+				{ token: i2.TranslationService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: SlidesComponent,
+			isStandalone: true,
+			selector: "kirby-slides",
+			inputs: {
+				slidesOptions: "slidesOptions",
+				title: "title",
+				slides: "slides",
+				showNavigation: "showNavigation"
+			},
+			outputs: { slideChange: "slideChange" },
+			queries: [{
+				propertyName: "slideTemplate",
+				first: true,
+				predicate: SlideDirective,
+				descendants: true,
+				read: TemplateRef,
+				static: true
+			}],
+			viewQueries: [{
+				propertyName: "swiperContainer",
+				first: true,
+				predicate: ["swiperContainer"],
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-color-fill-neutral)}:host .pagination ::ng-deep .swiper-pagination-bullet-active{background:var(--kirby-color-fill-brand-loud)}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SlidesComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-slides",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				NgClass,
+				ButtonComponent,
+				IconComponent,
+				NgTemplateOutlet
+			],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-color-fill-neutral)}:host .pagination ::ng-deep .swiper-pagination-bullet-active{background:var(--kirby-color-fill-brand-loud)}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.PlatformService },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i2.TranslationService }
+	],
+	propDecorators: {
+		swiperContainer: [{
+			type: ViewChild,
+			args: ["swiperContainer"]
+		}],
+		slideTemplate: [{
+			type: ContentChild,
+			args: [SlideDirective, {
+				static: true,
+				read: TemplateRef
+			}]
+		}],
+		slidesOptions: [{ type: Input }],
+		title: [{ type: Input }],
+		slides: [{ type: Input }],
+		showNavigation: [{ type: Input }],
+		slideChange: [{ type: Output }]
+	}
+});
+var SlideStretchHeightDirective = class SlideStretchHeightDirective {
+	constructor(elementRef, renderer) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.renderer.setStyle(this.elementRef.nativeElement, "height", "100%");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlideStretchHeightDirective,
+			deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: SlideStretchHeightDirective,
+			isStandalone: true,
+			selector: "[slideStretchHeight]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SlideStretchHeightDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[slideStretchHeight]" }]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }]
+});
+const imports = [
+	SlidesComponent,
+	SlideDirective,
+	SlideStretchHeightDirective
+];
+var SlideModule = class SlideModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlideModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlideModule,
+			imports: [
+				CommonModule,
+				ButtonComponent,
+				IconModule,
+				SlidesComponent,
+				SlideDirective,
+				SlideStretchHeightDirective
+			],
+			exports: [
+				SlidesComponent,
+				SlideDirective,
+				SlideStretchHeightDirective
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: SlideModule,
+			imports: [
+				CommonModule,
+				ButtonComponent,
+				IconModule,
+				SlidesComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SlideModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				ButtonComponent,
+				IconModule,
+				...imports
+			],
+			exports: [...imports],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA]
+		}]
+	}]
+});
 export { SlideDirective, SlideModule, SlideStretchHeightDirective, SlidesComponent };
-//# sourceMappingURL=kirbydesign-designsystem-slide.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-slide.mjs.map

package/fesm2022/kirbydesign-designsystem-slide.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-slide.mjs","sources":["../../slide/src/slide.directive.ts","../../slide/src/slides.component.ts","../../slide/src/slides.component.html","../../slide/src/slide-stretch-height.directive.ts","../../slide/src/slide.module.ts","../../slide/src/kirbydesign-designsystem-slide.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({ selector: '[kirbySlide]' })\nexport class SlideDirective {}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  CUSTOM_ELEMENTS_SCHEMA,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { register } from 'swiper/element/bundle';\nimport type { Swiper, SwiperOptions } from 'swiper/types';\nimport {\n  DesignTokenHelper,\n  PlatformService,\n  UniqueIdGenerator,\n} from '@kirbydesign/designsystem/helpers';\nimport { TranslationService } from '@kirbydesign/designsystem/shared';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { SlideDirective } from './slide.directive';\n\n// Swiper is not an Angular library,\n// so we need to use their web components and register them manually.\n// https://swiperjs.com/element\nregister();\n\nexport type SelectedSlide = {\n  slide: any;\n  index: number;\n};\n\nexport type KirbySwiperOptions = SwiperOptions;\ntype SwiperContainer = HTMLElement & { initialize: () => void; swiper: Swiper };\n\n@Component({\n  selector: 'kirby-slides',\n  templateUrl: './slides.component.html',\n  styleUrls: ['./slides.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlidesComponent implements OnInit, AfterViewInit, OnChanges {\n  constructor(\n    private platform: PlatformService,\n    private cdr: ChangeDetectorRef,\n    private translations: TranslationService\n  ) {}\n\n  @ViewChild('swiperContainer') swiperContainer: ElementRef<SwiperContainer>;\n  @ContentChild(SlideDirective, { static: true, read: TemplateRef })\n  public slideTemplate: TemplateRef<SlideDirective>;\n\n  @Input() slidesOptions?: KirbySwiperOptions;\n  @Input() title: string;\n  @Input() slides: unknown[];\n\n  @Input() showNavigation: boolean = true;\n\n  @Output() slideChange = new EventEmitter<SelectedSlide>();\n\n  _paginationId = UniqueIdGenerator.scopedTo('pagination').next();\n  _prevButtonId = UniqueIdGenerator.scopedTo('swiper-button-prev').next();\n  _nextButtonId = UniqueIdGenerator.scopedTo('swiper-button-next').next();\n  _isTouch: boolean;\n\n  ngOnInit() {\n    this._isTouch = this.platform.isTouch();\n  }\n\n  ngAfterViewInit() {\n    const defaultConfig = this.showNavigation\n      ? this.getDefaultConfig()\n      : this.getNoControlsConfig();\n\n    const config = { ...defaultConfig, ...this.slidesOptions };\n\n    Object.assign(this.swiperContainer.nativeElement, config);\n\n    this.swiperContainer.nativeElement.initialize();\n  }\n\n  public slideTo(index: number) {\n    this.swiperContainer.nativeElement.swiper.slideTo(index);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.slides?.firstChange === false) {\n      this.cdr.detectChanges();\n      this.swiperContainer.nativeElement.swiper.updateSlides();\n    }\n  }\n\n  private getDefaultConfig(): KirbySwiperOptions {\n    const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);\n    const spaceBetween = parseInt(DesignTokenHelper.size('s'));\n    const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));\n    return {\n      centeredSlides: true,\n      centeredSlidesBounds: true,\n      slidesPerView: 1.2,\n      slidesPerGroup: 1,\n      breakpoints: {\n        [desktopBreakpoint]: {\n          centeredSlides: false,\n          slidesPerView: 3,\n          slidesPerGroup: 3,\n        },\n      },\n      spaceBetween: spaceBetween,\n      speed: transitionDuration,\n      pagination: {\n        el: `.${this._paginationId}`,\n        type: 'bullets',\n      },\n      navigation: {\n        nextEl: `.${this._nextButtonId}`,\n        prevEl: `.${this._prevButtonId}`,\n        addIcons: false,\n      },\n      on: {\n        slideChange: (swiper) => {\n          this.slideChange.emit({\n            slide: this.slides[swiper.activeIndex],\n            index: swiper.activeIndex,\n          });\n        },\n      },\n      a11y: {\n        prevSlideMessage: this.translations.get('previousSlide'),\n        nextSlideMessage: this.translations.get('nextSlide'),\n      },\n    };\n  }\n\n  private getNoControlsConfig(): KirbySwiperOptions {\n    return { ...this.getDefaultConfig(), pagination: false, navigation: false };\n  }\n}\n","@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n","import { Directive, ElementRef, Renderer2 } from '@angular/core';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[slideStretchHeight]',\n})\nexport class SlideStretchHeightDirective {\n  constructor(\n    private elementRef: ElementRef,\n    private renderer: Renderer2\n  ) {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { SlidesComponent } from './slides.component';\nimport { SlideDirective } from './slide.directive';\nimport { SlideStretchHeightDirective } from './slide-stretch-height.directive';\n\nconst imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n  imports: [CommonModule, ButtonComponent, IconModule, ...imports],\n  exports: [...imports],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlideModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-slide.mjs","names":[],"sources":["../../slide/src/slide.directive.ts","../../slide/src/slides.component.ts","../../slide/src/slides.component.html","../../slide/src/slide-stretch-height.directive.ts","../../slide/src/slide.module.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({ selector: '[kirbySlide]' })\nexport class SlideDirective {}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  CUSTOM_ELEMENTS_SCHEMA,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { register } from 'swiper/element/bundle';\nimport type { Swiper, SwiperOptions } from 'swiper/types';\nimport {\n  DesignTokenHelper,\n  PlatformService,\n  UniqueIdGenerator,\n} from '@kirbydesign/designsystem/helpers';\nimport { TranslationService } from '@kirbydesign/designsystem/shared';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { SlideDirective } from './slide.directive';\n\n// Swiper is not an Angular library,\n// so we need to use their web components and register them manually.\n// https://swiperjs.com/element\nregister();\n\nexport type SelectedSlide = {\n  slide: any;\n  index: number;\n};\n\nexport type KirbySwiperOptions = SwiperOptions;\ntype SwiperContainer = HTMLElement & { initialize: () => void; swiper: Swiper };\n\n@Component({\n  selector: 'kirby-slides',\n  templateUrl: './slides.component.html',\n  styleUrls: ['./slides.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlidesComponent implements OnInit, AfterViewInit, OnChanges {\n  constructor(\n    private platform: PlatformService,\n    private cdr: ChangeDetectorRef,\n    private translations: TranslationService\n  ) {}\n\n  @ViewChild('swiperContainer') swiperContainer: ElementRef<SwiperContainer>;\n  @ContentChild(SlideDirective, { static: true, read: TemplateRef })\n  public slideTemplate: TemplateRef<SlideDirective>;\n\n  @Input() slidesOptions?: KirbySwiperOptions;\n  @Input() title: string;\n  @Input() slides: unknown[];\n\n  @Input() showNavigation: boolean = true;\n\n  @Output() slideChange = new EventEmitter<SelectedSlide>();\n\n  _paginationId = UniqueIdGenerator.scopedTo('pagination').next();\n  _prevButtonId = UniqueIdGenerator.scopedTo('swiper-button-prev').next();\n  _nextButtonId = UniqueIdGenerator.scopedTo('swiper-button-next').next();\n  _isTouch: boolean;\n\n  ngOnInit() {\n    this._isTouch = this.platform.isTouch();\n  }\n\n  ngAfterViewInit() {\n    const defaultConfig = this.showNavigation\n      ? this.getDefaultConfig()\n      : this.getNoControlsConfig();\n\n    const config = { ...defaultConfig, ...this.slidesOptions };\n\n    Object.assign(this.swiperContainer.nativeElement, config);\n\n    this.swiperContainer.nativeElement.initialize();\n  }\n\n  public slideTo(index: number) {\n    this.swiperContainer.nativeElement.swiper.slideTo(index);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.slides?.firstChange === false) {\n      this.cdr.detectChanges();\n      this.swiperContainer.nativeElement.swiper.updateSlides();\n    }\n  }\n\n  private getDefaultConfig(): KirbySwiperOptions {\n    const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);\n    const spaceBetween = parseInt(DesignTokenHelper.size('s'));\n    const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));\n    return {\n      centeredSlides: true,\n      centeredSlidesBounds: true,\n      slidesPerView: 1.2,\n      slidesPerGroup: 1,\n      breakpoints: {\n        [desktopBreakpoint]: {\n          centeredSlides: false,\n          slidesPerView: 3,\n          slidesPerGroup: 3,\n        },\n      },\n      spaceBetween: spaceBetween,\n      speed: transitionDuration,\n      pagination: {\n        el: `.${this._paginationId}`,\n        type: 'bullets',\n      },\n      navigation: {\n        nextEl: `.${this._nextButtonId}`,\n        prevEl: `.${this._prevButtonId}`,\n        addIcons: false,\n      },\n      on: {\n        slideChange: (swiper) => {\n          this.slideChange.emit({\n            slide: this.slides[swiper.activeIndex],\n            index: swiper.activeIndex,\n          });\n        },\n      },\n      a11y: {\n        prevSlideMessage: this.translations.get('previousSlide'),\n        nextSlideMessage: this.translations.get('nextSlide'),\n      },\n    };\n  }\n\n  private getNoControlsConfig(): KirbySwiperOptions {\n    return { ...this.getDefaultConfig(), pagination: false, navigation: false };\n  }\n}\n","@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n","import { Directive, ElementRef, Renderer2 } from '@angular/core';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[slideStretchHeight]',\n})\nexport class SlideStretchHeightDirective {\n  constructor(\n    private elementRef: ElementRef,\n    private renderer: Renderer2\n  ) {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { SlidesComponent } from './slides.component';\nimport { SlideDirective } from './slide.directive';\nimport { SlideStretchHeightDirective } from './slide-stretch-height.directive';\n\nconst imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n  imports: [CommonModule, ButtonComponent, IconModule, ...imports],\n  exports: [...imports],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlideModule {}\n"],"mappings":"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"}