@kirbydesign/designsystem 10.4.1 → 10.5.0
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 +10 -10
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-badge.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-card.mjs +16 -16
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-flag.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +81 -41
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +11 -10
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-list.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-menu.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-modal.mjs +42 -42
- package/fesm2022/kirbydesign-designsystem-page.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +15 -8
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-radio.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +18 -18
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-slide.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +286 -286
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +13 -13
- package/form-field/input/input.component.d.ts +5 -2
- package/form-field/input/input.component.d.ts.map +1 -1
- package/form-field/textarea/textarea.component.d.ts +5 -1
- package/form-field/textarea/textarea.component.d.ts.map +1 -1
- package/icon/kirby-icon-settings.d.ts.map +1 -1
- package/icons/svg/coinstack.svg +1 -5
- package/icons/svg/investment.svg +1 -5
- package/icons/svg/warning-decoration.svg +1 -0
- package/package.json +2 -2
- package/progress-circle/progress-circle.component.d.ts +1 -0
- package/progress-circle/progress-circle.component.d.ts.map +1 -1
- package/readme.md +3 -1
|
@@ -31,10 +31,10 @@ const contentScrollDebounceTimeInMS = 10;
|
|
|
31
31
|
const contentScrolledOffsetInPixels = 4;
|
|
32
32
|
const PAGE_BACK_BUTTON_OVERRIDE = new InjectionToken('page-back-button-override');
|
|
33
33
|
class PageTitleDirective {
|
|
34
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
35
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
34
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
35
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageTitleDirective, isStandalone: false, selector: "[kirbyPageTitle]", ngImport: i0 }); }
|
|
36
36
|
}
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageTitleDirective, decorators: [{
|
|
38
38
|
type: Directive,
|
|
39
39
|
args: [{
|
|
40
40
|
selector: '[kirbyPageTitle]',
|
|
@@ -42,10 +42,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
42
42
|
}]
|
|
43
43
|
}] });
|
|
44
44
|
class PageSubtitleDirective {
|
|
45
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
46
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
45
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
46
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageSubtitleDirective, isStandalone: false, selector: "[kirbyPageSubtitle]", ngImport: i0 }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageSubtitleDirective, decorators: [{
|
|
49
49
|
type: Directive,
|
|
50
50
|
args: [{
|
|
51
51
|
selector: '[kirbyPageSubtitle]',
|
|
@@ -53,10 +53,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
53
53
|
}]
|
|
54
54
|
}] });
|
|
55
55
|
class PageToolbarTitleDirective {
|
|
56
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
57
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
56
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageToolbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageToolbarTitleDirective, isStandalone: false, selector: "[kirbyPageToolbarTitle]", ngImport: i0 }); }
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageToolbarTitleDirective, decorators: [{
|
|
60
60
|
type: Directive,
|
|
61
61
|
args: [{
|
|
62
62
|
selector: '[kirbyPageToolbarTitle]',
|
|
@@ -76,10 +76,10 @@ class PageActionsDirective {
|
|
|
76
76
|
get isFixed() {
|
|
77
77
|
return this.config ? this.config.fixed : this.fixedDefault;
|
|
78
78
|
}
|
|
79
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
80
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
79
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
80
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageActionsDirective, isStandalone: false, selector: "[kirbyPageActions]", inputs: { config: ["kirbyPageActions", "config"] }, ngImport: i0 }); }
|
|
81
81
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageActionsDirective, decorators: [{
|
|
83
83
|
type: Directive,
|
|
84
84
|
args: [{
|
|
85
85
|
selector: '[kirbyPageActions]',
|
|
@@ -96,10 +96,10 @@ class PageContentDirective {
|
|
|
96
96
|
get isFixed() {
|
|
97
97
|
return this.config && this.config.fixed;
|
|
98
98
|
}
|
|
99
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
100
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
99
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
100
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageContentDirective, isStandalone: false, selector: "[kirbyPageContent]", inputs: { config: ["kirbyPageContent", "config"] }, ngImport: i0 }); }
|
|
101
101
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageContentDirective, decorators: [{
|
|
103
103
|
type: Directive,
|
|
104
104
|
args: [{
|
|
105
105
|
selector: '[kirbyPageContent]',
|
|
@@ -110,10 +110,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
110
110
|
args: ['kirbyPageContent']
|
|
111
111
|
}] } });
|
|
112
112
|
class PageStickyContentDirective {
|
|
113
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
114
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
113
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
114
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PageStickyContentDirective, isStandalone: false, selector: "[kirbyPageStickyContent]", ngImport: i0 }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageStickyContentDirective, decorators: [{
|
|
117
117
|
type: Directive,
|
|
118
118
|
args: [{
|
|
119
119
|
selector: '[kirbyPageStickyContent]',
|
|
@@ -127,12 +127,12 @@ class PageProgressComponent extends ModalElementComponent {
|
|
|
127
127
|
// This implementation was chosen over expanding `moveChild` method in component wrapper with yet another scenario
|
|
128
128
|
this.slot = 'start';
|
|
129
129
|
}
|
|
130
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
131
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
130
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageProgressComponent, deps: [{ token: i1.ModalElementsAdvertiser, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
131
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageProgressComponent, isStandalone: false, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: `
|
|
132
132
|
<ng-content></ng-content>
|
|
133
133
|
`, isInline: true, styles: [":host{display:flex;margin-inline-end:4px}\n"] }); }
|
|
134
134
|
}
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageProgressComponent, decorators: [{
|
|
136
136
|
type: Component,
|
|
137
137
|
args: [{ selector: 'kirby-page-progress', template: `
|
|
138
138
|
<ng-content></ng-content>
|
|
@@ -147,12 +147,12 @@ class PageTitleComponent extends ModalElementComponent {
|
|
|
147
147
|
constructor(elementRef, modalElementsAdvertiser) {
|
|
148
148
|
super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
|
|
149
149
|
}
|
|
150
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
151
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
150
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageTitleComponent, deps: [{ token: i0.ElementRef }, { token: i1.ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
151
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageTitleComponent, isStandalone: false, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: `
|
|
152
152
|
<ng-content></ng-content>
|
|
153
153
|
`, isInline: true }); }
|
|
154
154
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageTitleComponent, decorators: [{
|
|
156
156
|
type: Component,
|
|
157
157
|
args: [{
|
|
158
158
|
selector: 'kirby-page-title',
|
|
@@ -165,12 +165,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
165
165
|
type: Optional
|
|
166
166
|
}] }] });
|
|
167
167
|
class PageContentComponent {
|
|
168
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
169
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
168
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageContentComponent, isStandalone: false, selector: "kirby-page-content", ngImport: i0, template: `
|
|
170
170
|
<ng-content></ng-content>
|
|
171
171
|
`, isInline: true }); }
|
|
172
172
|
}
|
|
173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageContentComponent, decorators: [{
|
|
174
174
|
type: Component,
|
|
175
175
|
args: [{
|
|
176
176
|
selector: 'kirby-page-content',
|
|
@@ -181,12 +181,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
181
181
|
}]
|
|
182
182
|
}] });
|
|
183
183
|
class PageActionsComponent {
|
|
184
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
185
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
184
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
185
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageActionsComponent, isStandalone: false, selector: "kirby-page-actions", ngImport: i0, template: `
|
|
186
186
|
<ng-content select="button[kirby-button]"></ng-content>
|
|
187
187
|
`, isInline: true, styles: [":host{display:inline-flex;column-gap:8px}\n"] }); }
|
|
188
188
|
}
|
|
189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageActionsComponent, decorators: [{
|
|
190
190
|
type: Component,
|
|
191
191
|
args: [{ selector: 'kirby-page-actions', template: `
|
|
192
192
|
<ng-content select="button[kirby-button]"></ng-content>
|
|
@@ -663,10 +663,10 @@ class PageComponent {
|
|
|
663
663
|
this.content.scrollToTop(KirbyAnimation.Duration.LONG);
|
|
664
664
|
}
|
|
665
665
|
}
|
|
666
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
667
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: PageComponent, isStandalone: false, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", hasInteractiveTitle: "hasInteractiveTitle", maxWidth: "maxWidth", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick", toolbarTitleClick: "toolbarTitleClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, providers: [IonicElementPartHelper], queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "stickyContentRef", first: true, predicate: PageStickyContentDirective, descendants: true, read: TemplateRef }, { propertyName: "header", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "backButton", first: true, predicate: IonBackButton, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "stickyContentContainer", first: true, predicate: ["stickyContentContainer"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "ionToolbarButtonsElement", predicate: IonButtons, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar\n [class.content-scrolled]=\"isContentScrolled\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n [attr.aria-label]=\"translations.get('back')\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n </ng-container>\n <span\n *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n [class.clickable]=\"hasInteractiveTitle\"\n [class.has-icon]=\"!!titleActionIconTemplate\"\n (click)=\"onTitleClick($event)\"\n >\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n </span>\n </div>\n </ion-title>\n <ion-buttons\n *ngIf=\"!!headerActionsTemplate\"\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarActionsVisible\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n ></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content\n scrollEvents=\"true\"\n forceOverscroll=\"false\"\n [class]=\"getMaxWidthClasses()\"\n [class.has-header]=\"hasHeader\"\n>\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right',\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n </div>\n\n <!-- Header -->\n <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n <ng-content select=\"kirby-header\"></ng-content>\n </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}ion-toolbar{--border-width: 0 !important;--padding-start: 16px;--padding-end: 16px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black);--min-height: 56px}@media (min-width: 768px){ion-toolbar{--padding-start: 24px;--padding-end: 24px;--min-height: 72px}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: rgb(243.294, 243.294, 243.294)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:.2s}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-medium)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:8px}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:8px}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:16px;font-weight:400;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:56px;scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;opacity:1}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 792px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: 12px;--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}@media (min-width: 768px){ion-content{--padding-start: var(--page-content-padding-start, 48px);--padding-end: var(--page-content-padding-end, 48px)}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: 1092px}ion-content.max-width-xl{--page-content-max-width: 1392px}ion-content.max-width-full{--page-content-max-width: 100%}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;padding-top:1px;margin-block-end:24px;z-index:10}.sticky-content-container div{max-width:var(--page-content-max-width, 792px);margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:#f3f3f3}.sticky-content-container.content-pinned:after{background-color:var(--kirby-medium)}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }, { kind: "component", type: i9.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i5.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i5.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i5.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i5.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i5.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i5.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
666
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i2.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ModalNavigationService }, { token: i3.ResizeObserverService }, { token: i4.TabsComponent, optional: true, skipSelf: true }, { token: PAGE_BACK_BUTTON_OVERRIDE, optional: true }, { token: i5.IonRouterOutlet, optional: true }, { token: i5.NavController, optional: true }, { token: i6.IonicElementPartHelper }, { token: i3.TranslationService }, { token: i7.Title }, { token: KIRBY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
667
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageComponent, isStandalone: false, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", hasInteractiveTitle: "hasInteractiveTitle", maxWidth: "maxWidth", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick", toolbarTitleClick: "toolbarTitleClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, providers: [IonicElementPartHelper], queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "stickyContentRef", first: true, predicate: PageStickyContentDirective, descendants: true, read: TemplateRef }, { propertyName: "header", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "backButton", first: true, predicate: IonBackButton, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "stickyContentContainer", first: true, predicate: ["stickyContentContainer"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "ionToolbarButtonsElement", predicate: IonButtons, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar\n [class.content-scrolled]=\"isContentScrolled\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n [attr.aria-label]=\"translations.get('back')\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n </ng-container>\n <span\n *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n [class.clickable]=\"hasInteractiveTitle\"\n [class.has-icon]=\"!!titleActionIconTemplate\"\n (click)=\"onTitleClick($event)\"\n >\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n </span>\n </div>\n </ion-title>\n <ion-buttons\n *ngIf=\"!!headerActionsTemplate\"\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarActionsVisible\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n ></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content\n scrollEvents=\"true\"\n forceOverscroll=\"false\"\n [class]=\"getMaxWidthClasses()\"\n [class.has-header]=\"hasHeader\"\n>\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right',\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n </div>\n\n <!-- Header -->\n <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n <ng-content select=\"kirby-header\"></ng-content>\n </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}ion-toolbar{--border-width: 0 !important;--padding-start: 16px;--padding-end: 16px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black);--min-height: 56px}@media (min-width: 768px){ion-toolbar{--padding-start: 24px;--padding-end: 24px;--min-height: 72px}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: rgb(243.294, 243.294, 243.294)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:.2s}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-medium)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:8px}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:8px}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:16px;font-weight:400;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:56px;scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;opacity:1}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 792px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: 12px;--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}@media (min-width: 768px){ion-content{--padding-start: var(--page-content-padding-start, 48px);--padding-end: var(--page-content-padding-end, 48px)}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: 1092px}ion-content.max-width-xl{--page-content-max-width: 1392px}ion-content.max-width-full{--page-content-max-width: 100%}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;padding-top:1px;margin-block-end:24px;z-index:10}.sticky-content-container div{max-width:var(--page-content-max-width, 792px);margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:#f3f3f3}.sticky-content-container.content-pinned:after{background-color:var(--kirby-medium)}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }, { kind: "component", type: i9.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i5.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i5.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i5.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i5.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i5.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i5.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
668
668
|
}
|
|
669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageComponent, decorators: [{
|
|
670
670
|
type: Component,
|
|
671
671
|
args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], standalone: false, template: "<ion-header>\n <ion-toolbar\n [class.content-scrolled]=\"isContentScrolled\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n [attr.aria-label]=\"translations.get('back')\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n </ng-container>\n <span\n *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n [class.clickable]=\"hasInteractiveTitle\"\n [class.has-icon]=\"!!titleActionIconTemplate\"\n (click)=\"onTitleClick($event)\"\n >\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n </span>\n </div>\n </ion-title>\n <ion-buttons\n *ngIf=\"!!headerActionsTemplate\"\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarActionsVisible\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n ></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content\n scrollEvents=\"true\"\n forceOverscroll=\"false\"\n [class]=\"getMaxWidthClasses()\"\n [class.has-header]=\"hasHeader\"\n>\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right',\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n </div>\n\n <!-- Header -->\n <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n <ng-content select=\"kirby-header\"></ng-content>\n </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}ion-toolbar{--border-width: 0 !important;--padding-start: 16px;--padding-end: 16px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black);--min-height: 56px}@media (min-width: 768px){ion-toolbar{--padding-start: 24px;--padding-end: 24px;--min-height: 72px}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: rgb(243.294, 243.294, 243.294)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:.2s}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-medium)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:8px}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:8px}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:16px;font-weight:400;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:56px;scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;opacity:1}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 792px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: 12px;--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}@media (min-width: 768px){ion-content{--padding-start: var(--page-content-padding-start, 48px);--padding-end: var(--page-content-padding-end, 48px)}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: 1092px}ion-content.max-width-xl{--page-content-max-width: 1392px}ion-content.max-width-full{--page-content-max-width: 100%}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;padding-top:1px;margin-block-end:24px;z-index:10}.sticky-content-container div{max-width:var(--page-content-max-width, 792px);margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:#f3f3f3}.sticky-content-container.content-pinned:after{background-color:var(--kirby-medium)}\n"] }]
|
|
672
672
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i2.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ModalNavigationService }, { type: i3.ResizeObserverService }, { type: i4.TabsComponent, decorators: [{
|
|
@@ -799,10 +799,10 @@ class PageFooterComponent {
|
|
|
799
799
|
ngOnDestroy() {
|
|
800
800
|
this.pageComponent.tabBarBottomHidden = false;
|
|
801
801
|
}
|
|
802
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
803
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
802
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageFooterComponent, deps: [{ token: PageComponent, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
803
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PageFooterComponent, isStandalone: false, selector: "kirby-page-footer", inputs: { hasPadding: "hasPadding" }, ngImport: i0, template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block;background-color:var(--kirby-white);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:8px 16px;padding-bottom:calc(8px + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
804
804
|
}
|
|
805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
805
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageFooterComponent, decorators: [{
|
|
806
806
|
type: Component,
|
|
807
807
|
args: [{ selector: 'kirby-page-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block;background-color:var(--kirby-white);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:8px 16px;padding-bottom:calc(8px + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"] }]
|
|
808
808
|
}], ctorParameters: () => [{ type: PageComponent, decorators: [{
|
|
@@ -814,8 +814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
814
814
|
}] } });
|
|
815
815
|
|
|
816
816
|
class PageModule {
|
|
817
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
818
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
817
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
818
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: PageModule, declarations: [PageComponent,
|
|
819
819
|
PageActionsComponent,
|
|
820
820
|
PageActionsDirective,
|
|
821
821
|
PageContentComponent,
|
|
@@ -850,7 +850,7 @@ class PageModule {
|
|
|
850
850
|
PageToolbarTitleDirective,
|
|
851
851
|
FitHeadingDirective,
|
|
852
852
|
PageStickyContentDirective] }); }
|
|
853
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
853
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageModule, imports: [CommonModule,
|
|
854
854
|
SpinnerModule,
|
|
855
855
|
HeaderModule,
|
|
856
856
|
IonHeader,
|
|
@@ -862,7 +862,7 @@ class PageModule {
|
|
|
862
862
|
IonRefresher,
|
|
863
863
|
IonFooter] }); }
|
|
864
864
|
}
|
|
865
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageModule, decorators: [{
|
|
866
866
|
type: NgModule,
|
|
867
867
|
args: [{
|
|
868
868
|
declarations: [
|
|
@@ -134,12 +134,12 @@ class PopoverComponent {
|
|
|
134
134
|
this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
138
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
137
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
138
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PopoverComponent, isStandalone: true, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, host: { listeners: { "window:resize": "_onWindowResize()" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
|
|
139
139
|
<div #wrapper class="wrapper"><ng-content></ng-content></div>
|
|
140
140
|
`, isInline: true, styles: [":host{display:none;position:fixed;inset:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
141
141
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
143
143
|
type: Component,
|
|
144
144
|
args: [{ imports: [CommonModule], selector: 'kirby-popover', template: `
|
|
145
145
|
<div #wrapper class="wrapper"><ng-content></ng-content></div>
|
|
@@ -35,12 +35,12 @@ class ProgressCircleRingComponent {
|
|
|
35
35
|
return 0;
|
|
36
36
|
return this.strokeWidth;
|
|
37
37
|
}
|
|
38
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
39
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
38
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "class.view-initialized": "this.viewInitialized", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"circle\"\n fill=\"transparent\"\n [attr.stroke-width]=\"strokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n />\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"progress\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-width]=\"_progressStrokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
40
40
|
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
43
|
-
args: [{ imports: [CommonModule], selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"circle\"\n fill=\"transparent\"\n [attr.stroke-width]=\"strokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n />\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"progress\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-width]=\"_progressStrokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"] }]
|
|
43
|
+
args: [{ imports: [CommonModule], selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"circle\"\n fill=\"transparent\"\n [attr.stroke-width]=\"strokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n />\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"progress\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-width]=\"_progressStrokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"] }]
|
|
44
44
|
}], propDecorators: { radius: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}], value: [{
|
|
@@ -74,6 +74,7 @@ class ProgressCircleComponent {
|
|
|
74
74
|
md: { diameter: 56, strokeWidth: 4, upperBound: 96 },
|
|
75
75
|
lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },
|
|
76
76
|
};
|
|
77
|
+
this.role = 'progressbar';
|
|
77
78
|
this.value = 0;
|
|
78
79
|
this.size = 'md';
|
|
79
80
|
this.themeColor = 'success';
|
|
@@ -122,13 +123,19 @@ class ProgressCircleComponent {
|
|
|
122
123
|
// This is needed to make sure that an input value close to 100 is not shown as 100
|
|
123
124
|
return this.SIZE_CONFIG[this.size].upperBound;
|
|
124
125
|
}
|
|
125
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
126
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
126
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ProgressCircleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
127
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "attr.role": "this.role", "attr.aria-valuenow": "this.value", "class": "this._cssSize", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n [themeColor]=\"themeColor\"\n [value]=\"_shownValue\"\n [radius]=\"_radius\"\n [strokeWidth]=\"_strokeWidth\"\n [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["radius", "value", "themeColor", "strokeWidth", "upperBound"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor], kirby-card[themeColor], kirby-icon[themeColor], kirby-progress-circle-ring[themeColor], kirby-modal-footer[themeColor], kirby-empty-state[themeColor]", inputs: ["themeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
127
128
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ProgressCircleComponent, decorators: [{
|
|
129
130
|
type: Component,
|
|
130
131
|
args: [{ imports: [ProgressCircleRingComponent, CommonModule, ThemeColorDirective], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n [themeColor]=\"themeColor\"\n [value]=\"_shownValue\"\n [radius]=\"_radius\"\n [strokeWidth]=\"_strokeWidth\"\n [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"] }]
|
|
131
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: {
|
|
132
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { role: [{
|
|
133
|
+
type: HostBinding,
|
|
134
|
+
args: ['attr.role']
|
|
135
|
+
}], value: [{
|
|
136
|
+
type: HostBinding,
|
|
137
|
+
args: ['attr.aria-valuenow']
|
|
138
|
+
}, {
|
|
132
139
|
type: Input
|
|
133
140
|
}], size: [{
|
|
134
141
|
type: Input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html","../../progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n} from '@angular/core';\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-progress-circle-ring',\n templateUrl: './progress-circle-ring.component.html',\n styleUrls: ['./progress-circle-ring.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n @Input() radius: number; // The desired outer radius of the SVG circle\n @Input() value: number = 0;\n @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n @Input() strokeWidth: number;\n @Input() upperBound: number;\n\n @HostBinding('class.view-initialized')\n viewInitialized;\n\n ngAfterViewInit(): void {\n this.viewInitialized = true;\n }\n\n @HostBinding('style.width.px')\n @HostBinding('style.height.px')\n get _diameter(): number {\n return this.radius * 2;\n }\n\n get _centerRadius(): number {\n return this.radius - this.strokeWidth / 2;\n }\n\n get _centerCircumference(): number {\n return this._centerRadius * 2 * Math.PI;\n }\n\n get _progress(): number {\n const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n const _value = valueWithinBounds ? this.value : this.upperBound;\n const progressPercentage = _value / 100;\n return this._centerCircumference * progressPercentage;\n }\n\n get _remainder(): number {\n return this._centerCircumference - this._progress;\n }\n\n get _progressStrokeWidth(): number {\n // Do not render stroke if progress is 0, otherwise it will show as a dot\n if (this._progress === 0) return 0;\n\n return this.strokeWidth;\n }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"circle\"\n fill=\"transparent\"\n [attr.stroke-width]=\"strokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n />\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"progress\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-width]=\"_progressStrokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n />\n</svg>\n","import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n imports: [ProgressCircleRingComponent, CommonModule, ThemeColorDirective],\n selector: 'kirby-progress-circle',\n templateUrl: './progress-circle.component.html',\n styleUrls: ['./progress-circle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n readonly SIZE_CONFIG = {\n sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n };\n\n @Input() value: number = 0;\n @Input() size: 'sm' | 'md' | 'lg' = 'md';\n @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n @HostBinding('class')\n get _cssSize() {\n return this.size;\n }\n\n private hasElementBeenVisible?: boolean;\n private observer: IntersectionObserver;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private changeDetectorRef: ChangeDetectorRef\n ) {}\n\n ngAfterViewInit(): void {\n if (!this.observer) {\n this.observer = new IntersectionObserver(this.onIntersectionChange, {\n threshold: 0.5,\n });\n this.observer.observe(this.elementRef.nativeElement);\n }\n }\n\n ngOnDestroy(): void {\n this.unobserve();\n }\n\n private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n if (this.hasElementBeenVisible) {\n this.unobserve();\n this.changeDetectorRef.markForCheck();\n }\n };\n\n private unobserve() {\n if (this.observer) {\n this.observer.unobserve(this.elementRef.nativeElement);\n // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n if (typeof this.observer.disconnect === 'function') {\n this.observer.disconnect();\n }\n }\n }\n\n @HostBinding('style.width.px')\n @HostBinding('style.height.px')\n get _diameter(): number {\n return this.SIZE_CONFIG[this.size].diameter;\n }\n\n get _shownValue() {\n // This is needed to make an animation [0 -> value] when element is shown to the user\n return this.hasElementBeenVisible ? this.value : 0;\n }\n\n get _radius() {\n return this._diameter / 2;\n }\n\n get _strokeWidth() {\n return this.SIZE_CONFIG[this.size].strokeWidth;\n }\n\n get _upperBound() {\n // This is needed to make sure that an input value close to 100 is not shown as 100\n return this.SIZE_CONFIG[this.size].upperBound;\n }\n}\n","<div class=\"transcluded-content\">\n <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n [themeColor]=\"themeColor\"\n [value]=\"_shownValue\"\n [radius]=\"_radius\"\n [strokeWidth]=\"_strokeWidth\"\n [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\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-progress-circle.mjs","sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html","../../progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n} from '@angular/core';\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-progress-circle-ring',\n templateUrl: './progress-circle-ring.component.html',\n styleUrls: ['./progress-circle-ring.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n @Input() radius: number; // The desired outer radius of the SVG circle\n @Input() value: number = 0;\n @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n @Input() strokeWidth: number;\n @Input() upperBound: number;\n\n @HostBinding('class.view-initialized')\n viewInitialized;\n\n ngAfterViewInit(): void {\n this.viewInitialized = true;\n }\n\n @HostBinding('style.width.px')\n @HostBinding('style.height.px')\n get _diameter(): number {\n return this.radius * 2;\n }\n\n get _centerRadius(): number {\n return this.radius - this.strokeWidth / 2;\n }\n\n get _centerCircumference(): number {\n return this._centerRadius * 2 * Math.PI;\n }\n\n get _progress(): number {\n const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n const _value = valueWithinBounds ? this.value : this.upperBound;\n const progressPercentage = _value / 100;\n return this._centerCircumference * progressPercentage;\n }\n\n get _remainder(): number {\n return this._centerCircumference - this._progress;\n }\n\n get _progressStrokeWidth(): number {\n // Do not render stroke if progress is 0, otherwise it will show as a dot\n if (this._progress === 0) return 0;\n\n return this.strokeWidth;\n }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"circle\"\n fill=\"transparent\"\n [attr.stroke-width]=\"strokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n />\n <circle\n shape-rendering=\"geometricPrecision\"\n class=\"progress\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-width]=\"_progressStrokeWidth\"\n [attr.r]=\"_centerRadius\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n />\n</svg>\n","import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n imports: [ProgressCircleRingComponent, CommonModule, ThemeColorDirective],\n selector: 'kirby-progress-circle',\n templateUrl: './progress-circle.component.html',\n styleUrls: ['./progress-circle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n readonly SIZE_CONFIG = {\n sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n };\n\n @HostBinding('attr.role') readonly role = 'progressbar';\n @HostBinding('attr.aria-valuenow')\n @Input()\n value: number = 0;\n @Input() size: 'sm' | 'md' | 'lg' = 'md';\n @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n @HostBinding('class')\n get _cssSize() {\n return this.size;\n }\n\n private hasElementBeenVisible?: boolean;\n private observer: IntersectionObserver;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private changeDetectorRef: ChangeDetectorRef\n ) {}\n\n ngAfterViewInit(): void {\n if (!this.observer) {\n this.observer = new IntersectionObserver(this.onIntersectionChange, {\n threshold: 0.5,\n });\n this.observer.observe(this.elementRef.nativeElement);\n }\n }\n\n ngOnDestroy(): void {\n this.unobserve();\n }\n\n private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n if (this.hasElementBeenVisible) {\n this.unobserve();\n this.changeDetectorRef.markForCheck();\n }\n };\n\n private unobserve() {\n if (this.observer) {\n this.observer.unobserve(this.elementRef.nativeElement);\n // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n if (typeof this.observer.disconnect === 'function') {\n this.observer.disconnect();\n }\n }\n }\n\n @HostBinding('style.width.px')\n @HostBinding('style.height.px')\n get _diameter(): number {\n return this.SIZE_CONFIG[this.size].diameter;\n }\n\n get _shownValue() {\n // This is needed to make an animation [0 -> value] when element is shown to the user\n return this.hasElementBeenVisible ? this.value : 0;\n }\n\n get _radius() {\n return this._diameter / 2;\n }\n\n get _strokeWidth() {\n return this.SIZE_CONFIG[this.size].strokeWidth;\n }\n\n get _upperBound() {\n // This is needed to make sure that an input value close to 100 is not shown as 100\n return this.SIZE_CONFIG[this.size].upperBound;\n }\n}\n","<div class=\"transcluded-content\">\n <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n [themeColor]=\"themeColor\"\n [value]=\"_shownValue\"\n [radius]=\"_radius\"\n [strokeWidth]=\"_strokeWidth\"\n [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|