@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +246 -135
- package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +229 -134
- package/fesm2022/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +102 -55
- package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-badge.mjs +85 -42
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-button.mjs +203 -170
- package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +524 -516
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +439 -205
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-chart.mjs +1388 -1469
- package/fesm2022/kirbydesign-designsystem-chart.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +215 -176
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +50 -96
- package/fesm2022/kirbydesign-designsystem-config.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +180 -83
- package/fesm2022/kirbydesign-designsystem-data-table.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-divider.mjs +46 -19
- package/fesm2022/kirbydesign-designsystem-divider.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +878 -752
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +164 -91
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +213 -85
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-flag.mjs +67 -33
- package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +1260 -901
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-gesture.mjs +38 -23
- package/fesm2022/kirbydesign-designsystem-gesture.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +422 -182
- package/fesm2022/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-helpers-scss.mjs +16 -14
- package/fesm2022/kirbydesign-designsystem-helpers-scss.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +251 -361
- package/fesm2022/kirbydesign-designsystem-helpers.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-icon.mjs +881 -303
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +52 -23
- package/fesm2022/kirbydesign-designsystem-item-group.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +147 -43
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item.mjs +395 -151
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +136 -54
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +1185 -697
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +166 -76
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +420 -311
- package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +2467 -1912
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +1505 -923
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +203 -183
- package/fesm2022/kirbydesign-designsystem-popover.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +209 -121
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +537 -365
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +207 -150
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +217 -104
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +113 -38
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +56 -18
- package/fesm2022/kirbydesign-designsystem-section-header.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +276 -232
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +319 -382
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +73 -84
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared.mjs +665 -529
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +140 -91
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +360 -158
- package/fesm2022/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +90 -32
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +348 -181
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +286 -121
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +6232 -3164
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +118 -95
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +128 -101
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing.mjs +236 -243
- package/fesm2022/kirbydesign-designsystem-testing.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toast.mjs +98 -62
- package/fesm2022/kirbydesign-designsystem-toast.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +155 -127
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +180 -150
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +39 -24
- package/fesm2022/kirbydesign-designsystem-types.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem.mjs +516 -407
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/megaphone.svg +3 -0
- package/package.json +10 -10
- package/readme.md +37 -0
- package/types/kirbydesign-designsystem-accordion.d.ts +72 -39
- package/types/kirbydesign-designsystem-accordion.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-action-group.d.ts +46 -39
- package/types/kirbydesign-designsystem-action-group.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-avatar.d.ts +62 -26
- package/types/kirbydesign-designsystem-avatar.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-badge.d.ts +30 -19
- package/types/kirbydesign-designsystem-badge.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-button.d.ts +70 -45
- package/types/kirbydesign-designsystem-button.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-calendar.d.ts +193 -132
- package/types/kirbydesign-designsystem-calendar.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-card.d.ts +130 -66
- package/types/kirbydesign-designsystem-card.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-chart.d.ts +198 -172
- package/types/kirbydesign-designsystem-chart.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-checkbox.d.ts +96 -68
- package/types/kirbydesign-designsystem-checkbox.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-config.d.ts +17 -21
- package/types/kirbydesign-designsystem-config.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-data-table.d.ts +46 -26
- package/types/kirbydesign-designsystem-data-table.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-divider.d.ts +11 -9
- package/types/kirbydesign-designsystem-divider.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-dropdown.d.ts +219 -166
- package/types/kirbydesign-designsystem-dropdown.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-empty-state.d.ts +47 -35
- package/types/kirbydesign-designsystem-empty-state.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-fab-sheet.d.ts +34 -28
- package/types/kirbydesign-designsystem-fab-sheet.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-flag.d.ts +18 -13
- package/types/kirbydesign-designsystem-flag.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-form-field.d.ts +409 -242
- package/types/kirbydesign-designsystem-form-field.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-gesture.d.ts +41 -46
- package/types/kirbydesign-designsystem-gesture.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-header.d.ts +102 -64
- package/types/kirbydesign-designsystem-header.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-helpers-scss.d.ts +6 -8
- package/types/kirbydesign-designsystem-helpers-scss.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-helpers.d.ts +83 -97
- package/types/kirbydesign-designsystem-helpers.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts +63 -59
- package/types/kirbydesign-designsystem-icon.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-item-group.d.ts +6 -9
- package/types/kirbydesign-designsystem-item-group.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-item-sliding.d.ts +30 -26
- package/types/kirbydesign-designsystem-item-sliding.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-item.d.ts +93 -54
- package/types/kirbydesign-designsystem-item.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-kirby-app.d.ts +18 -19
- package/types/kirbydesign-designsystem-kirby-app.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-list.d.ts +387 -263
- package/types/kirbydesign-designsystem-list.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-loading-overlay.d.ts +35 -24
- package/types/kirbydesign-designsystem-loading-overlay.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-menu.d.ts +119 -69
- package/types/kirbydesign-designsystem-menu.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-modal.d.ts +577 -455
- package/types/kirbydesign-designsystem-modal.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +304 -229
- package/types/kirbydesign-designsystem-page.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-popover.d.ts +48 -40
- package/types/kirbydesign-designsystem-popover.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-progress-circle.d.ts +60 -38
- package/types/kirbydesign-designsystem-progress-circle.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-radio.d.ts +147 -98
- package/types/kirbydesign-designsystem-radio.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-range.d.ts +90 -45
- package/types/kirbydesign-designsystem-range.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-reorder-list.d.ts +44 -32
- package/types/kirbydesign-designsystem-reorder-list.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-router-outlet.d.ts +23 -18
- package/types/kirbydesign-designsystem-router-outlet.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-section-header.d.ts +5 -8
- package/types/kirbydesign-designsystem-section-header.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-segmented-control.d.ts +123 -100
- package/types/kirbydesign-designsystem-segmented-control.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-shared-floating.d.ts +183 -128
- package/types/kirbydesign-designsystem-shared-floating.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-shared-portal.d.ts +29 -28
- package/types/kirbydesign-designsystem-shared-portal.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-shared.d.ts +143 -139
- package/types/kirbydesign-designsystem-shared.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-slide-button.d.ts +43 -34
- package/types/kirbydesign-designsystem-slide-button.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts +80 -59
- package/types/kirbydesign-designsystem-slide.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-spinner.d.ts +13 -14
- package/types/kirbydesign-designsystem-spinner.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-tab-navigation.d.ts +78 -55
- package/types/kirbydesign-designsystem-tab-navigation.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-tabs.d.ts +50 -45
- package/types/kirbydesign-designsystem-tabs.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-testing-base.d.ts +2430 -815
- package/types/kirbydesign-designsystem-testing-base.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-testing-jasmine.d.ts +9 -10
- package/types/kirbydesign-designsystem-testing-jasmine.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-testing-jest.d.ts +9 -10
- package/types/kirbydesign-designsystem-testing-jest.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-testing.d.ts +52 -58
- package/types/kirbydesign-designsystem-testing.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-toast.d.ts +25 -31
- package/types/kirbydesign-designsystem-toast.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-toggle-button.d.ts +62 -56
- package/types/kirbydesign-designsystem-toggle-button.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-toggle.d.ts +71 -63
- package/types/kirbydesign-designsystem-toggle.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-types.d.ts +15 -22
- package/types/kirbydesign-designsystem-types.d.ts.map +1 -1
- package/types/kirbydesign-designsystem.d.ts +135 -123
- package/types/kirbydesign-designsystem.d.ts.map +1 -1
- package/accordion/package.json +0 -4
- package/action-group/package.json +0 -4
- package/avatar/package.json +0 -4
- package/badge/package.json +0 -4
- package/button/package.json +0 -4
- package/calendar/package.json +0 -4
- package/card/package.json +0 -4
- package/chart/package.json +0 -4
- package/checkbox/package.json +0 -4
- package/config/package.json +0 -4
- package/data-table/package.json +0 -4
- package/divider/package.json +0 -4
- package/dropdown/package.json +0 -4
- package/empty-state/package.json +0 -4
- package/fab-sheet/package.json +0 -4
- package/flag/package.json +0 -4
- package/form-field/package.json +0 -4
- package/gesture/package.json +0 -4
- package/header/package.json +0 -4
- package/helpers/package.json +0 -4
- package/helpers/scss/package.json +0 -4
- package/icon/package.json +0 -4
- package/item/package.json +0 -4
- package/item-group/package.json +0 -4
- package/item-sliding/package.json +0 -4
- package/kirby-app/package.json +0 -4
- package/list/package.json +0 -4
- package/loading-overlay/package.json +0 -4
- package/menu/package.json +0 -4
- package/modal/package.json +0 -4
- package/page/package.json +0 -4
- package/popover/package.json +0 -4
- package/progress-circle/package.json +0 -4
- package/radio/package.json +0 -4
- package/range/package.json +0 -4
- package/reorder-list/package.json +0 -4
- package/router-outlet/package.json +0 -4
- package/section-header/package.json +0 -4
- package/segmented-control/package.json +0 -4
- package/shared/floating/package.json +0 -4
- package/shared/package.json +0 -4
- package/shared/portal/package.json +0 -4
- package/slide/package.json +0 -4
- package/slide-button/package.json +0 -4
- package/spinner/package.json +0 -4
- package/tab-navigation/package.json +0 -4
- package/tabs/package.json +0 -4
- package/testing/package.json +0 -4
- package/testing-base/package.json +0 -4
- package/testing-jasmine/package.json +0 -4
- package/testing-jest/package.json +0 -4
- package/toast/package.json +0 -4
- package/toggle/package.json +0 -4
- package/toggle-button/package.json +0 -4
- package/types/package.json +0 -4
|
@@ -1,160 +1,362 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import { register } from
|
|
4
|
-
import * as i1 from
|
|
5
|
-
import {
|
|
6
|
-
import { NgClass, NgTemplateOutlet
|
|
7
|
-
import { ButtonComponent } from
|
|
8
|
-
import { IconComponent, IconModule } from
|
|
9
|
-
import * as i2 from
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ContentChild, Directive, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild } from "@angular/core";
|
|
3
|
+
import { register } from "swiper/element/bundle";
|
|
4
|
+
import * as i1 from "@kirbydesign/designsystem/helpers";
|
|
5
|
+
import { DesignTokenHelper, UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
|
|
6
|
+
import { CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
|
|
7
|
+
import { ButtonComponent } from "@kirbydesign/designsystem/button";
|
|
8
|
+
import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
|
|
9
|
+
import * as i2 from "@kirbydesign/designsystem/shared";
|
|
10
|
+
var SlideDirective = class SlideDirective {
|
|
11
|
+
static {
|
|
12
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
13
|
+
minVersion: "12.0.0",
|
|
14
|
+
version: "22.2.2",
|
|
15
|
+
ngImport: i0,
|
|
16
|
+
type: SlideDirective,
|
|
17
|
+
deps: [],
|
|
18
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
static {
|
|
22
|
+
this.ɵdir = i0.ɵɵngDeclareDirective({
|
|
23
|
+
minVersion: "14.0.0",
|
|
24
|
+
version: "22.2.2",
|
|
25
|
+
type: SlideDirective,
|
|
26
|
+
isStandalone: true,
|
|
27
|
+
selector: "[kirbySlide]",
|
|
28
|
+
ngImport: i0
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
33
|
+
minVersion: "12.0.0",
|
|
34
|
+
version: "22.2.2",
|
|
35
|
+
ngImport: i0,
|
|
36
|
+
type: SlideDirective,
|
|
37
|
+
decorators: [{
|
|
38
|
+
type: Directive,
|
|
39
|
+
args: [{ selector: "[kirbySlide]" }]
|
|
40
|
+
}]
|
|
41
|
+
});
|
|
23
42
|
register();
|
|
24
|
-
class SlidesComponent {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
43
|
+
var SlidesComponent = class SlidesComponent {
|
|
44
|
+
constructor(platform, cdr, translations) {
|
|
45
|
+
this.platform = platform;
|
|
46
|
+
this.cdr = cdr;
|
|
47
|
+
this.translations = translations;
|
|
48
|
+
this.showNavigation = true;
|
|
49
|
+
this.slideChange = new EventEmitter();
|
|
50
|
+
this._paginationId = UniqueIdGenerator.scopedTo("pagination").next();
|
|
51
|
+
this._prevButtonId = UniqueIdGenerator.scopedTo("swiper-button-prev").next();
|
|
52
|
+
this._nextButtonId = UniqueIdGenerator.scopedTo("swiper-button-next").next();
|
|
53
|
+
}
|
|
54
|
+
ngOnInit() {
|
|
55
|
+
this._isTouch = this.platform.isTouch();
|
|
56
|
+
}
|
|
57
|
+
ngAfterViewInit() {
|
|
58
|
+
const config = {
|
|
59
|
+
...this.showNavigation ? this.getDefaultConfig() : this.getNoControlsConfig(),
|
|
60
|
+
...this.slidesOptions
|
|
61
|
+
};
|
|
62
|
+
Object.assign(this.swiperContainer.nativeElement, config);
|
|
63
|
+
this.swiperContainer.nativeElement.initialize();
|
|
64
|
+
}
|
|
65
|
+
slideTo(index) {
|
|
66
|
+
this.swiperContainer.nativeElement.swiper.slideTo(index);
|
|
67
|
+
}
|
|
68
|
+
ngOnChanges(changes) {
|
|
69
|
+
if (changes.slides?.firstChange === false) {
|
|
70
|
+
this.cdr.detectChanges();
|
|
71
|
+
this.swiperContainer.nativeElement.swiper.updateSlides();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
getDefaultConfig() {
|
|
75
|
+
const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);
|
|
76
|
+
const spaceBetween = parseInt(DesignTokenHelper.size("s"));
|
|
77
|
+
const transitionDuration = parseInt(DesignTokenHelper.transitionDuration("long"));
|
|
78
|
+
return {
|
|
79
|
+
centeredSlides: true,
|
|
80
|
+
centeredSlidesBounds: true,
|
|
81
|
+
slidesPerView: 1.2,
|
|
82
|
+
slidesPerGroup: 1,
|
|
83
|
+
breakpoints: { [desktopBreakpoint]: {
|
|
84
|
+
centeredSlides: false,
|
|
85
|
+
slidesPerView: 3,
|
|
86
|
+
slidesPerGroup: 3
|
|
87
|
+
} },
|
|
88
|
+
spaceBetween,
|
|
89
|
+
speed: transitionDuration,
|
|
90
|
+
pagination: {
|
|
91
|
+
el: `.${this._paginationId}`,
|
|
92
|
+
type: "bullets"
|
|
93
|
+
},
|
|
94
|
+
navigation: {
|
|
95
|
+
nextEl: `.${this._nextButtonId}`,
|
|
96
|
+
prevEl: `.${this._prevButtonId}`,
|
|
97
|
+
addIcons: false
|
|
98
|
+
},
|
|
99
|
+
on: { slideChange: (swiper) => {
|
|
100
|
+
this.slideChange.emit({
|
|
101
|
+
slide: this.slides[swiper.activeIndex],
|
|
102
|
+
index: swiper.activeIndex
|
|
103
|
+
});
|
|
104
|
+
} },
|
|
105
|
+
a11y: {
|
|
106
|
+
prevSlideMessage: this.translations.get("previousSlide"),
|
|
107
|
+
nextSlideMessage: this.translations.get("nextSlide")
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
getNoControlsConfig() {
|
|
112
|
+
return {
|
|
113
|
+
...this.getDefaultConfig(),
|
|
114
|
+
pagination: false,
|
|
115
|
+
navigation: false
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
static {
|
|
119
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
120
|
+
minVersion: "12.0.0",
|
|
121
|
+
version: "22.2.2",
|
|
122
|
+
ngImport: i0,
|
|
123
|
+
type: SlidesComponent,
|
|
124
|
+
deps: [
|
|
125
|
+
{ token: i1.PlatformService },
|
|
126
|
+
{ token: i0.ChangeDetectorRef },
|
|
127
|
+
{ token: i2.TranslationService }
|
|
128
|
+
],
|
|
129
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
static {
|
|
133
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
134
|
+
minVersion: "17.0.0",
|
|
135
|
+
version: "22.2.2",
|
|
136
|
+
type: SlidesComponent,
|
|
137
|
+
isStandalone: true,
|
|
138
|
+
selector: "kirby-slides",
|
|
139
|
+
inputs: {
|
|
140
|
+
slidesOptions: "slidesOptions",
|
|
141
|
+
title: "title",
|
|
142
|
+
slides: "slides",
|
|
143
|
+
showNavigation: "showNavigation"
|
|
144
|
+
},
|
|
145
|
+
outputs: { slideChange: "slideChange" },
|
|
146
|
+
queries: [{
|
|
147
|
+
propertyName: "slideTemplate",
|
|
148
|
+
first: true,
|
|
149
|
+
predicate: SlideDirective,
|
|
150
|
+
descendants: true,
|
|
151
|
+
read: TemplateRef,
|
|
152
|
+
static: true
|
|
153
|
+
}],
|
|
154
|
+
viewQueries: [{
|
|
155
|
+
propertyName: "swiperContainer",
|
|
156
|
+
first: true,
|
|
157
|
+
predicate: ["swiperContainer"],
|
|
158
|
+
descendants: true
|
|
159
|
+
}],
|
|
160
|
+
usesOnChanges: true,
|
|
161
|
+
ngImport: i0,
|
|
162
|
+
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",
|
|
163
|
+
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"],
|
|
164
|
+
dependencies: [
|
|
165
|
+
{
|
|
166
|
+
kind: "directive",
|
|
167
|
+
type: NgClass,
|
|
168
|
+
selector: "[ngClass]",
|
|
169
|
+
inputs: ["class", "ngClass"]
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
kind: "component",
|
|
173
|
+
type: ButtonComponent,
|
|
174
|
+
selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
|
|
175
|
+
inputs: [
|
|
176
|
+
"attentionLevel",
|
|
177
|
+
"noDecoration",
|
|
178
|
+
"themeColor",
|
|
179
|
+
"expand",
|
|
180
|
+
"isFloating",
|
|
181
|
+
"size",
|
|
182
|
+
"showIconOnly"
|
|
183
|
+
]
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
kind: "component",
|
|
187
|
+
type: IconComponent,
|
|
188
|
+
selector: "kirby-icon",
|
|
189
|
+
inputs: ["size", "name"]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
kind: "directive",
|
|
193
|
+
type: NgTemplateOutlet,
|
|
194
|
+
selector: "[ngTemplateOutlet]",
|
|
195
|
+
inputs: [
|
|
196
|
+
"ngTemplateOutletContext",
|
|
197
|
+
"ngTemplateOutlet",
|
|
198
|
+
"ngTemplateOutletInjector"
|
|
199
|
+
]
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
207
|
+
minVersion: "12.0.0",
|
|
208
|
+
version: "22.2.2",
|
|
209
|
+
ngImport: i0,
|
|
210
|
+
type: SlidesComponent,
|
|
211
|
+
decorators: [{
|
|
212
|
+
type: Component,
|
|
213
|
+
args: [{
|
|
214
|
+
selector: "kirby-slides",
|
|
215
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
216
|
+
imports: [
|
|
217
|
+
NgClass,
|
|
218
|
+
ButtonComponent,
|
|
219
|
+
IconComponent,
|
|
220
|
+
NgTemplateOutlet
|
|
221
|
+
],
|
|
222
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
223
|
+
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",
|
|
224
|
+
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"]
|
|
225
|
+
}]
|
|
226
|
+
}],
|
|
227
|
+
ctorParameters: () => [
|
|
228
|
+
{ type: i1.PlatformService },
|
|
229
|
+
{ type: i0.ChangeDetectorRef },
|
|
230
|
+
{ type: i2.TranslationService }
|
|
231
|
+
],
|
|
232
|
+
propDecorators: {
|
|
233
|
+
swiperContainer: [{
|
|
234
|
+
type: ViewChild,
|
|
235
|
+
args: ["swiperContainer"]
|
|
236
|
+
}],
|
|
237
|
+
slideTemplate: [{
|
|
238
|
+
type: ContentChild,
|
|
239
|
+
args: [SlideDirective, {
|
|
240
|
+
static: true,
|
|
241
|
+
read: TemplateRef
|
|
242
|
+
}]
|
|
243
|
+
}],
|
|
244
|
+
slidesOptions: [{ type: Input }],
|
|
245
|
+
title: [{ type: Input }],
|
|
246
|
+
slides: [{ type: Input }],
|
|
247
|
+
showNavigation: [{ type: Input }],
|
|
248
|
+
slideChange: [{ type: Output }]
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
var SlideStretchHeightDirective = class SlideStretchHeightDirective {
|
|
252
|
+
constructor(elementRef, renderer) {
|
|
253
|
+
this.elementRef = elementRef;
|
|
254
|
+
this.renderer = renderer;
|
|
255
|
+
this.renderer.setStyle(this.elementRef.nativeElement, "height", "100%");
|
|
256
|
+
}
|
|
257
|
+
static {
|
|
258
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
259
|
+
minVersion: "12.0.0",
|
|
260
|
+
version: "22.2.2",
|
|
261
|
+
ngImport: i0,
|
|
262
|
+
type: SlideStretchHeightDirective,
|
|
263
|
+
deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
|
|
264
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
static {
|
|
268
|
+
this.ɵdir = i0.ɵɵngDeclareDirective({
|
|
269
|
+
minVersion: "14.0.0",
|
|
270
|
+
version: "22.2.2",
|
|
271
|
+
type: SlideStretchHeightDirective,
|
|
272
|
+
isStandalone: true,
|
|
273
|
+
selector: "[slideStretchHeight]",
|
|
274
|
+
ngImport: i0
|
|
275
|
+
});
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
279
|
+
minVersion: "12.0.0",
|
|
280
|
+
version: "22.2.2",
|
|
281
|
+
ngImport: i0,
|
|
282
|
+
type: SlideStretchHeightDirective,
|
|
283
|
+
decorators: [{
|
|
284
|
+
type: Directive,
|
|
285
|
+
args: [{ selector: "[slideStretchHeight]" }]
|
|
286
|
+
}],
|
|
287
|
+
ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }]
|
|
288
|
+
});
|
|
289
|
+
const imports = [
|
|
290
|
+
SlidesComponent,
|
|
291
|
+
SlideDirective,
|
|
292
|
+
SlideStretchHeightDirective
|
|
293
|
+
];
|
|
294
|
+
var SlideModule = class SlideModule {
|
|
295
|
+
static {
|
|
296
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
297
|
+
minVersion: "12.0.0",
|
|
298
|
+
version: "22.2.2",
|
|
299
|
+
ngImport: i0,
|
|
300
|
+
type: SlideModule,
|
|
301
|
+
deps: [],
|
|
302
|
+
target: i0.ɵɵFactoryTarget.NgModule
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
static {
|
|
306
|
+
this.ɵmod = i0.ɵɵngDeclareNgModule({
|
|
307
|
+
minVersion: "14.0.0",
|
|
308
|
+
version: "22.2.2",
|
|
309
|
+
ngImport: i0,
|
|
310
|
+
type: SlideModule,
|
|
311
|
+
imports: [
|
|
312
|
+
CommonModule,
|
|
313
|
+
ButtonComponent,
|
|
314
|
+
IconModule,
|
|
315
|
+
SlidesComponent,
|
|
316
|
+
SlideDirective,
|
|
317
|
+
SlideStretchHeightDirective
|
|
318
|
+
],
|
|
319
|
+
exports: [
|
|
320
|
+
SlidesComponent,
|
|
321
|
+
SlideDirective,
|
|
322
|
+
SlideStretchHeightDirective
|
|
323
|
+
]
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
static {
|
|
327
|
+
this.ɵinj = i0.ɵɵngDeclareInjector({
|
|
328
|
+
minVersion: "12.0.0",
|
|
329
|
+
version: "22.2.2",
|
|
330
|
+
ngImport: i0,
|
|
331
|
+
type: SlideModule,
|
|
332
|
+
imports: [
|
|
333
|
+
CommonModule,
|
|
334
|
+
ButtonComponent,
|
|
335
|
+
IconModule,
|
|
336
|
+
SlidesComponent
|
|
337
|
+
]
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
};
|
|
341
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
342
|
+
minVersion: "12.0.0",
|
|
343
|
+
version: "22.2.2",
|
|
344
|
+
ngImport: i0,
|
|
345
|
+
type: SlideModule,
|
|
346
|
+
decorators: [{
|
|
347
|
+
type: NgModule,
|
|
348
|
+
args: [{
|
|
349
|
+
imports: [
|
|
350
|
+
CommonModule,
|
|
351
|
+
ButtonComponent,
|
|
352
|
+
IconModule,
|
|
353
|
+
...imports
|
|
354
|
+
],
|
|
355
|
+
exports: [...imports],
|
|
356
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
357
|
+
}]
|
|
358
|
+
}]
|
|
359
|
+
});
|
|
159
360
|
export { SlideDirective, SlideModule, SlideStretchHeightDirective, SlidesComponent };
|
|
160
|
-
|
|
361
|
+
|
|
362
|
+
//# sourceMappingURL=kirbydesign-designsystem-slide.mjs.map
|
|
@@ -1 +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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"}
|
|
1
|
+
{"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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"}
|