@kirbydesign/designsystem 8.11.0 → 9.0.0-ionic.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/avatar/avatar.component.d.ts +2 -5
- package/button/button.component.d.ts +2 -4
- package/esm2020/avatar/avatar.component.mjs +2 -11
- package/esm2020/button/button.component.mjs +4 -15
- package/esm2020/calendar/calendar.component.mjs +3 -3
- package/esm2020/checkbox/checkbox.component.mjs +3 -3
- package/esm2020/form-field/form-field-message/form-field-message.component.mjs +2 -2
- package/esm2020/form-field/form-field.component.mjs +3 -3
- package/esm2020/form-field/input/input.component.mjs +3 -3
- package/esm2020/form-field/textarea/textarea.component.mjs +3 -3
- package/esm2020/icon/icon.component.mjs +2 -2
- package/esm2020/icon/kirby-icon-settings.mjs +3 -1
- package/esm2020/lib/components/page-local-navigation/page-local-navigation.component.mjs +4 -4
- package/esm2020/lib/components/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2020/lib/index.mjs +1 -3
- package/esm2020/lib/kirby.module.mjs +1 -7
- package/esm2020/modal/modal/services/modal-animation-builder.service.mjs +1 -1
- package/esm2020/modal/modal/services/modal.controller.mjs +1 -26
- package/esm2020/modal/modal/services/modal.helper.mjs +1 -19
- package/esm2020/modal/modal-wrapper/modal-wrapper.component.mjs +1 -1
- package/esm2020/modal/v2/modal/modal.component.mjs +1 -1
- package/esm2020/modal/v2/modal-routing/modal-routing.component.mjs +1 -1
- package/esm2020/modal/v2/wrapper/wrapper.component.mjs +1 -1
- package/esm2020/page/page-footer/page-footer.component.mjs +2 -2
- package/esm2020/page/page.component.mjs +17 -6
- package/esm2020/radio/radio.component.mjs +3 -3
- package/esm2020/range/range.component.mjs +3 -3
- package/esm2020/router-outlet/router-outlet.component.mjs +1 -1
- package/esm2020/slide/slides.component.mjs +4 -19
- package/esm2020/tab-navigation/tab-navigation/tab-navigation.component.mjs +2 -2
- package/esm2020/tabs/tab-button/tab-button.component.mjs +2 -2
- package/esm2020/tabs/tabs.component.mjs +2 -2
- package/esm2020/testing-base/lib/components/index.mjs +1 -3
- package/esm2020/testing-base/lib/kirby-testing-base.module.mjs +86 -88
- package/esm2020/testing-base/lib/mock-components.mjs +1 -5
- package/esm2020/testing-jasmine/lib/mock-providers.mjs +1 -4
- package/esm2020/testing-jest/lib/mock-providers.mjs +1 -4
- package/esm2020/toggle/toggle.component.mjs +5 -3
- package/fesm2015/kirbydesign-designsystem-accordion.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-action-group.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-avatar.mjs +2 -10
- package/fesm2015/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-button.mjs +4 -14
- package/fesm2015/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-calendar.mjs +3 -2
- package/fesm2015/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-card.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-chart.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-checkbox.mjs +3 -2
- package/fesm2015/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-data-table.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-divider.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-dropdown.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-empty-state.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-fab-sheet.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-flag.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-form-field.mjs +9 -8
- package/fesm2015/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-header.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-helpers-scss.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-helpers.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-icon.mjs +5 -2
- package/fesm2015/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-item-group.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-item-sliding.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-item.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-kirby-app.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-list.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-loading-overlay.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-menu.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs +4 -3
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-modal.mjs +2 -48
- package/fesm2015/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-page.mjs +19 -7
- package/fesm2015/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-popover.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-progress-circle.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-radio.mjs +3 -2
- package/fesm2015/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-range.mjs +3 -2
- package/fesm2015/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-reorder-list.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-router-outlet.mjs +2 -1
- package/fesm2015/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-section-header.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-shared-floating.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-shared-portal.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-shared.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-slide-button.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-slide.mjs +4 -18
- package/fesm2015/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-spinner.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs +3 -2
- package/fesm2015/kirbydesign-designsystem-tabs.mjs +5 -4
- package/fesm2015/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +4 -72
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs +1 -3
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs +1 -3
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-testing.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-toast.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-toggle-button.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem-toggle.mjs +5 -2
- package/fesm2015/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-types.mjs +1 -0
- package/fesm2015/kirbydesign-designsystem.mjs +6 -13
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-accordion.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-action-group.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-avatar.mjs +2 -10
- package/fesm2020/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-button.mjs +4 -14
- package/fesm2020/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-calendar.mjs +3 -2
- package/fesm2020/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-card.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-chart.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-checkbox.mjs +3 -2
- package/fesm2020/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-data-table.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-divider.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-dropdown.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-empty-state.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-fab-sheet.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-flag.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-form-field.mjs +9 -8
- package/fesm2020/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-header.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-helpers-scss.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-helpers.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-icon.mjs +5 -2
- package/fesm2020/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-item-group.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-item-sliding.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-item.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-kirby-app.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-kirby-ionic-module.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-list.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-loading-overlay.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-menu.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs +4 -3
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-modal.mjs +2 -44
- package/fesm2020/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-page.mjs +19 -7
- package/fesm2020/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-popover.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-progress-circle.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-radio.mjs +3 -2
- package/fesm2020/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-range.mjs +3 -2
- package/fesm2020/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-reorder-list.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-router-outlet.mjs +2 -1
- package/fesm2020/kirbydesign-designsystem-router-outlet.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-section-header.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-shared-floating.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-shared-portal.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-shared.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-slide-button.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-slide.mjs +4 -18
- package/fesm2020/kirbydesign-designsystem-slide.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-spinner.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs +3 -2
- package/fesm2020/kirbydesign-designsystem-tabs.mjs +5 -4
- package/fesm2020/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +4 -72
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs +1 -3
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs +1 -3
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-testing.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-toast.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-toggle-button.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem-toggle.mjs +5 -2
- package/fesm2020/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-types.mjs +1 -0
- package/fesm2020/kirbydesign-designsystem.mjs +6 -13
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/form-field/form-field.component.d.ts +1 -1
- package/icon/src/README.md +16 -0
- package/icons/svg/bs-logo.svg +2 -0
- package/icons/svg/company.svg +2 -0
- package/lib/index.d.ts +0 -2
- package/lib/kirby.module.d.ts +22 -23
- package/modal/modal/services/modal.controller.d.ts +0 -10
- package/modal/modal/services/modal.helper.d.ts +0 -4
- package/package.json +3 -19
- package/page/page.component.d.ts +5 -2
- package/slide/slides.component.d.ts +2 -6
- package/testing-base/lib/components/index.d.ts +0 -2
- package/testing-base/lib/kirby-testing-base.module.d.ts +85 -87
- package/testing-jest/lib/mock-providers.d.ts +0 -3
- package/toggle/toggle.component.d.ts +2 -1
- package/README.md +0 -7
- package/alert-experimental/alert.component.d.ts +0 -28
- package/alert-experimental/alert.module.d.ts +0 -8
- package/alert-experimental/config/alert-config.d.ts +0 -14
- package/alert-experimental/index.d.ts +0 -5
- package/alert-experimental/public_api.d.ts +0 -4
- package/alert-experimental/services/alert.controller.d.ts +0 -20
- package/esm2020/alert-experimental/alert.component.mjs +0 -76
- package/esm2020/alert-experimental/alert.module.mjs +0 -18
- package/esm2020/alert-experimental/config/alert-config.mjs +0 -2
- package/esm2020/alert-experimental/kirbydesign-designsystem-alert-experimental.mjs +0 -5
- package/esm2020/alert-experimental/public_api.mjs +0 -4
- package/esm2020/alert-experimental/services/alert.controller.mjs +0 -67
- package/esm2020/grid/breakpoint-helper.service.mjs +0 -28
- package/esm2020/grid/grid-card-configuration.mjs +0 -8
- package/esm2020/grid/grid.component.mjs +0 -98
- package/esm2020/grid/kirbydesign-designsystem-grid.mjs +0 -5
- package/esm2020/grid/public_api.mjs +0 -4
- package/esm2020/testing-base/lib/components/mock.alert-experimental.component.mjs +0 -41
- package/esm2020/testing-base/lib/components/mock.grid.component.mjs +0 -31
- package/fesm2015/kirbydesign-designsystem-alert-experimental.mjs +0 -150
- package/fesm2015/kirbydesign-designsystem-alert-experimental.mjs.map +0 -1
- package/fesm2015/kirbydesign-designsystem-grid.mjs +0 -137
- package/fesm2015/kirbydesign-designsystem-grid.mjs.map +0 -1
- package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs +0 -157
- package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs.map +0 -1
- package/fesm2020/kirbydesign-designsystem-grid.mjs +0 -137
- package/fesm2020/kirbydesign-designsystem-grid.mjs.map +0 -1
- package/grid/breakpoint-helper.service.d.ts +0 -13
- package/grid/grid-card-configuration.d.ts +0 -8
- package/grid/grid.component.d.ts +0 -25
- package/grid/index.d.ts +0 -5
- package/grid/public_api.d.ts +0 -3
- package/testing-base/lib/components/mock.alert-experimental.component.d.ts +0 -14
- package/testing-base/lib/components/mock.grid.component.d.ts +0 -8
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, ViewChild, Input, Injectable, NgModule } from '@angular/core';
|
|
3
|
-
import { of, Subject, from, tap, switchMap } from 'rxjs';
|
|
4
|
-
import * as i4 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
6
|
-
import { IconModule } from '@kirbydesign/designsystem/icon';
|
|
7
|
-
import * as i2 from '@kirbydesign/designsystem/shared';
|
|
8
|
-
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
9
|
-
import * as i3 from '@kirbydesign/designsystem/empty-state';
|
|
10
|
-
import { EmptyStateModule } from '@kirbydesign/designsystem/empty-state';
|
|
11
|
-
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
12
|
-
import * as i1 from '@kirbydesign/designsystem/types';
|
|
13
|
-
import * as i1$1 from '@ionic/angular';
|
|
14
|
-
|
|
15
|
-
class AlertExperimentalComponent {
|
|
16
|
-
constructor(elementRef, windowRef) {
|
|
17
|
-
this.elementRef = elementRef;
|
|
18
|
-
this.windowRef = windowRef;
|
|
19
|
-
this.BLUR_WRAPPER_DELAY_IN_MS = 50;
|
|
20
|
-
this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
|
|
21
|
-
}
|
|
22
|
-
set title(title) {
|
|
23
|
-
this.title$ = typeof title === 'string' ? of(title) : title;
|
|
24
|
-
}
|
|
25
|
-
set message(message) {
|
|
26
|
-
this.message$ = typeof message === 'string' ? of(message) : message;
|
|
27
|
-
}
|
|
28
|
-
ngAfterViewInit() {
|
|
29
|
-
setTimeout(() => {
|
|
30
|
-
this.alertWrapper.nativeElement.focus();
|
|
31
|
-
this.alertWrapper.nativeElement.blur();
|
|
32
|
-
}, this.BLUR_WRAPPER_DELAY_IN_MS);
|
|
33
|
-
}
|
|
34
|
-
onFocusChange() {
|
|
35
|
-
// This fixes an undesired scroll behaviour occurring on keyboard-tabbing
|
|
36
|
-
this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
|
|
37
|
-
}
|
|
38
|
-
cancelAlert() {
|
|
39
|
-
const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
|
|
40
|
-
ionModalElement && ionModalElement.dismiss(false);
|
|
41
|
-
}
|
|
42
|
-
approveAlert() {
|
|
43
|
-
const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
|
|
44
|
-
ionModalElement && ionModalElement.dismiss(true);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
/** @nocollapse */ AlertExperimentalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
/** @nocollapse */ AlertExperimentalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertExperimentalComponent, isStandalone: true, selector: "kirby-alert-experimental", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okButton: "okButton", okButtonIsDestructive: "okButtonIsDestructive", cancelButton: "cancelButton" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.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"] }, { kind: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalComponent, decorators: [{
|
|
50
|
-
type: Component,
|
|
51
|
-
args: [{ standalone: true, imports: [
|
|
52
|
-
IconModule,
|
|
53
|
-
EmptyStateModule,
|
|
54
|
-
ButtonComponent,
|
|
55
|
-
CommonModule,
|
|
56
|
-
EmptyStateModule,
|
|
57
|
-
ThemeColorDirective,
|
|
58
|
-
], selector: 'kirby-alert-experimental', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
|
|
59
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.WindowRef }]; }, propDecorators: { alertWrapper: [{
|
|
60
|
-
type: ViewChild,
|
|
61
|
-
args: ['alertWrapper', { static: true }]
|
|
62
|
-
}], title: [{
|
|
63
|
-
type: Input
|
|
64
|
-
}], message: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}], iconName: [{
|
|
67
|
-
type: Input
|
|
68
|
-
}], iconThemeColor: [{
|
|
69
|
-
type: Input
|
|
70
|
-
}], okButton: [{
|
|
71
|
-
type: Input
|
|
72
|
-
}], okButtonIsDestructive: [{
|
|
73
|
-
type: Input
|
|
74
|
-
}], cancelButton: [{
|
|
75
|
-
type: Input
|
|
76
|
-
}] } });
|
|
77
|
-
|
|
78
|
-
class AlertExperimentalController {
|
|
79
|
-
constructor(ionicModalController) {
|
|
80
|
-
this.ionicModalController = ionicModalController;
|
|
81
|
-
}
|
|
82
|
-
showAlert(config) {
|
|
83
|
-
const $onWillDismiss = new Subject();
|
|
84
|
-
const onWillDismiss$ = $onWillDismiss.asObservable();
|
|
85
|
-
const $onDidDismiss = new Subject();
|
|
86
|
-
const onDidDismiss$ = $onDidDismiss.asObservable();
|
|
87
|
-
const modal$ = from(this.ionicModalController.create({
|
|
88
|
-
component: AlertExperimentalComponent,
|
|
89
|
-
componentProps: this.getComponentProps(config),
|
|
90
|
-
cssClass: ['kirby-overlay', 'kirby-alert'],
|
|
91
|
-
mode: 'ios',
|
|
92
|
-
backdropDismiss: false,
|
|
93
|
-
}));
|
|
94
|
-
modal$
|
|
95
|
-
.pipe(tap((modal) => from(modal.present())), switchMap((modal) => modal.onWillDismiss()))
|
|
96
|
-
.subscribe((res) => {
|
|
97
|
-
$onWillDismiss.next(res);
|
|
98
|
-
$onWillDismiss.complete();
|
|
99
|
-
$onDidDismiss.next(res);
|
|
100
|
-
$onDidDismiss.complete();
|
|
101
|
-
});
|
|
102
|
-
return {
|
|
103
|
-
onWillDismiss: onWillDismiss$,
|
|
104
|
-
onDidDismiss: onDidDismiss$,
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
getComponentProps(config) {
|
|
108
|
-
return Object.assign(Object.assign({}, config), { okButton: this.getOkButton(config), cancelButton: config.cancelButton, okButtonIsDestructive: this.getOkButtonIsDestructive(config), iconName: config.icon && config.icon.name, iconThemeColor: config.icon && config.icon.themeColor });
|
|
109
|
-
}
|
|
110
|
-
getOkButton(config) {
|
|
111
|
-
let text;
|
|
112
|
-
if (config.okButton) {
|
|
113
|
-
if (typeof config.okButton === 'string') {
|
|
114
|
-
text = config.okButton;
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
text = config.okButton.text;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
return text;
|
|
121
|
-
}
|
|
122
|
-
getOkButtonIsDestructive(config) {
|
|
123
|
-
return typeof config.okButton === 'object' ? config.okButton.isDestructive : undefined;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
/** @nocollapse */ AlertExperimentalController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
127
|
-
/** @nocollapse */ AlertExperimentalController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController });
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController, decorators: [{
|
|
129
|
-
type: Injectable
|
|
130
|
-
}], ctorParameters: function () { return [{ type: i1$1.ModalController }]; } });
|
|
131
|
-
|
|
132
|
-
class AlertExperimentalModule {
|
|
133
|
-
}
|
|
134
|
-
/** @nocollapse */ AlertExperimentalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
135
|
-
/** @nocollapse */ AlertExperimentalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, imports: [CommonModule, AlertExperimentalComponent] });
|
|
136
|
-
/** @nocollapse */ AlertExperimentalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, providers: [AlertExperimentalController], imports: [CommonModule, AlertExperimentalComponent] });
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, decorators: [{
|
|
138
|
-
type: NgModule,
|
|
139
|
-
args: [{
|
|
140
|
-
imports: [CommonModule, AlertExperimentalComponent],
|
|
141
|
-
providers: [AlertExperimentalController],
|
|
142
|
-
}]
|
|
143
|
-
}] });
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* Generated bundle index. Do not edit.
|
|
147
|
-
*/
|
|
148
|
-
|
|
149
|
-
export { AlertExperimentalComponent, AlertExperimentalController, AlertExperimentalModule };
|
|
150
|
-
//# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-alert-experimental.mjs","sources":["../../../../libs/designsystem/alert-experimental/src/alert.component.ts","../../../../libs/designsystem/alert-experimental/src/alert.component.html","../../../../libs/designsystem/alert-experimental/src/services/alert.controller.ts","../../../../libs/designsystem/alert-experimental/src/alert.module.ts","../../../../libs/designsystem/alert-experimental/src/kirbydesign-designsystem-alert-experimental.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { Observable, of } from 'rxjs';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateModule } from '@kirbydesign/designsystem/empty-state';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ThemeColor } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n standalone: true,\n imports: [\n IconModule,\n EmptyStateModule,\n ButtonComponent,\n CommonModule,\n EmptyStateModule,\n ThemeColorDirective,\n ],\n selector: 'kirby-alert-experimental',\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: { '[class.ion-page]': 'false' }, //Ensure ion-page class doesn't get applied by Ionic Modal Controller\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlertExperimentalComponent implements AfterViewInit {\n readonly BLUR_WRAPPER_DELAY_IN_MS = 50;\n @ViewChild('alertWrapper', { static: true }) private alertWrapper: ElementRef;\n private scrollY: number = Math.abs(this.windowRef.nativeWindow.scrollY);\n\n title$: Observable<string>;\n @Input()\n set title(title: string | Observable<string>) {\n this.title$ = typeof title === 'string' ? of(title) : title;\n }\n\n message$: Observable<string>;\n @Input()\n set message(message: string & Observable<string>) {\n this.message$ = typeof message === 'string' ? of(message) : message;\n }\n\n @Input() iconName: string;\n @Input() iconThemeColor: ThemeColor | `${ThemeColor}`;\n @Input() okButton: string;\n @Input() okButtonIsDestructive: boolean;\n @Input() cancelButton: string;\n\n constructor(private elementRef: ElementRef<HTMLElement>, private windowRef: WindowRef) {}\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n this.alertWrapper.nativeElement.focus();\n this.alertWrapper.nativeElement.blur();\n }, this.BLUR_WRAPPER_DELAY_IN_MS);\n }\n\n onFocusChange() {\n // This fixes an undesired scroll behaviour occurring on keyboard-tabbing\n this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });\n }\n\n cancelAlert() {\n const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n ionModalElement && ionModalElement.dismiss(false);\n }\n\n approveAlert() {\n const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n ionModalElement && ionModalElement.dismiss(true);\n }\n}\n","<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n","import { Injectable } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { from, Observable, Subject, switchMap, tap } from 'rxjs';\nimport { OverlayEventDetail } from '@ionic/core/components';\nimport { AlertExperimentalComponent } from '../alert.component';\nimport { AlertExperimentalConfig } from '../config/alert-config';\n\ntype AlertDismissObservables = {\n onWillDismiss: Observable<OverlayEventDetail>;\n onDidDismiss: Observable<OverlayEventDetail>;\n};\n\n@Injectable()\nexport class AlertExperimentalController {\n constructor(private ionicModalController: ModalController) {}\n\n public showAlert(config: AlertExperimentalConfig): AlertDismissObservables {\n const $onWillDismiss = new Subject<OverlayEventDetail>();\n const onWillDismiss$ = $onWillDismiss.asObservable();\n\n const $onDidDismiss = new Subject<OverlayEventDetail>();\n const onDidDismiss$ = $onDidDismiss.asObservable();\n\n const modal$ = from(\n this.ionicModalController.create({\n component: AlertExperimentalComponent,\n componentProps: this.getComponentProps(config),\n cssClass: ['kirby-overlay', 'kirby-alert'],\n mode: 'ios',\n backdropDismiss: false,\n })\n );\n\n modal$\n .pipe(\n tap((modal) => from(modal.present())),\n switchMap((modal) => modal.onWillDismiss())\n )\n .subscribe((res) => {\n $onWillDismiss.next(res);\n $onWillDismiss.complete();\n\n $onDidDismiss.next(res);\n $onDidDismiss.complete();\n });\n\n return {\n onWillDismiss: onWillDismiss$,\n onDidDismiss: onDidDismiss$,\n };\n }\n\n private getComponentProps(config: AlertExperimentalConfig) {\n return {\n ...config,\n okButton: this.getOkButton(config),\n cancelButton: config.cancelButton,\n okButtonIsDestructive: this.getOkButtonIsDestructive(config),\n iconName: config.icon && config.icon.name,\n iconThemeColor: config.icon && config.icon.themeColor,\n };\n }\n\n private getOkButton(config: AlertExperimentalConfig) {\n let text: string;\n\n if (config.okButton) {\n if (typeof config.okButton === 'string') {\n text = config.okButton;\n } else {\n text = config.okButton.text;\n }\n }\n return text;\n }\n\n getOkButtonIsDestructive(config) {\n return typeof config.okButton === 'object' ? config.okButton.isDestructive : undefined;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AlertExperimentalComponent } from './alert.component';\nimport { AlertExperimentalController } from './services/alert.controller';\n\n@NgModule({\n imports: [CommonModule, AlertExperimentalComponent],\n providers: [AlertExperimentalController],\n})\nexport class AlertExperimentalModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, HostBinding, Input } from '@angular/core';
|
|
3
|
-
import { Subject } from 'rxjs';
|
|
4
|
-
import * as i2 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
6
|
-
import { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';
|
|
7
|
-
import { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';
|
|
8
|
-
|
|
9
|
-
class BreakpointHelperService {
|
|
10
|
-
constructor() {
|
|
11
|
-
this.orientationChangedSubject = new Subject();
|
|
12
|
-
this.init();
|
|
13
|
-
}
|
|
14
|
-
init() {
|
|
15
|
-
// TODO JEO: Implement Angular/CDK BreakpointObserver:
|
|
16
|
-
this.orientationChangedSubject.next();
|
|
17
|
-
}
|
|
18
|
-
observe() {
|
|
19
|
-
return this.orientationChangedSubject.asObservable();
|
|
20
|
-
}
|
|
21
|
-
ngOnDestroy() {
|
|
22
|
-
this.orientationChangedSubject.complete();
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
/** @nocollapse */ BreakpointHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
26
|
-
/** @nocollapse */ BreakpointHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, providedIn: 'root' });
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreakpointHelperService, decorators: [{
|
|
28
|
-
type: Injectable,
|
|
29
|
-
args: [{
|
|
30
|
-
providedIn: 'root',
|
|
31
|
-
}]
|
|
32
|
-
}], ctorParameters: function () { return []; } });
|
|
33
|
-
|
|
34
|
-
class GridCardConfiguration {
|
|
35
|
-
constructor(component, data, preferredSize) {
|
|
36
|
-
this.component = component;
|
|
37
|
-
this.data = data;
|
|
38
|
-
this.preferredSize = preferredSize;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const GRID_DEPRICATION_WARNING = 'Deprecation warning: The "kirby-grid" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';
|
|
43
|
-
class GridCard {
|
|
44
|
-
constructor(configuration, row, col, colSpan) {
|
|
45
|
-
this.configuration = configuration;
|
|
46
|
-
this.row = row;
|
|
47
|
-
this.col = col;
|
|
48
|
-
this.colSpan = colSpan;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
class GridComponent {
|
|
52
|
-
constructor(breakpointHelper) {
|
|
53
|
-
this.breakpointHelper = breakpointHelper;
|
|
54
|
-
this.cards = [];
|
|
55
|
-
console.warn(GRID_DEPRICATION_WARNING);
|
|
56
|
-
}
|
|
57
|
-
set cardConfigurations(cardConfigurations) {
|
|
58
|
-
this.cardConfigs = cardConfigurations;
|
|
59
|
-
// TODO TRM/JEO Remove this when breakpoint observe something something...
|
|
60
|
-
this.configureGrid();
|
|
61
|
-
}
|
|
62
|
-
configureGrid() {
|
|
63
|
-
let calculatedMaxColumns = 0;
|
|
64
|
-
if (this.maxColumns === undefined) {
|
|
65
|
-
calculatedMaxColumns =
|
|
66
|
-
this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
calculatedMaxColumns = this.maxColumns;
|
|
70
|
-
}
|
|
71
|
-
this.cards = [];
|
|
72
|
-
let columnCounter = 0;
|
|
73
|
-
let currentRow = 0;
|
|
74
|
-
let currentColumn = 0;
|
|
75
|
-
this.cardConfigs.forEach((card, index) => {
|
|
76
|
-
// Cards colspan is added to the column counter
|
|
77
|
-
columnCounter += card.preferredSize;
|
|
78
|
-
// If only maxColumns are set to 1, just add all cards with a colspan of 1
|
|
79
|
-
if (calculatedMaxColumns === 1) {
|
|
80
|
-
this.cards.push(new GridCard(card, currentRow, currentColumn, 1));
|
|
81
|
-
currentRow += 1;
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
// If we are below maxColumns, then add the card to the array
|
|
85
|
-
if (columnCounter <= calculatedMaxColumns) {
|
|
86
|
-
this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
|
|
87
|
-
// Update currentColumn, so the next card will be placed correctly
|
|
88
|
-
currentColumn += card.preferredSize;
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
// The new card didn't fit - Calculate remaining columns for previous card
|
|
92
|
-
const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);
|
|
93
|
-
const prevCard = this.cards[index - 1];
|
|
94
|
-
// Add the restColumns to the previous cards colspan, to make it span out
|
|
95
|
-
prevCard.colSpan = restColumns + prevCard.colSpan;
|
|
96
|
-
// We are now on a new row
|
|
97
|
-
currentRow += 1;
|
|
98
|
-
currentColumn = 0;
|
|
99
|
-
this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
|
|
100
|
-
// Update currentColumn to match the size of the new card and reset columnCounter
|
|
101
|
-
currentColumn = card.preferredSize;
|
|
102
|
-
columnCounter = card.preferredSize;
|
|
103
|
-
}
|
|
104
|
-
// If we on the last card, make sure it spans all the rest of the columns
|
|
105
|
-
if (this.cardConfigs.length - 1 === index) {
|
|
106
|
-
const restColumns = calculatedMaxColumns - columnCounter;
|
|
107
|
-
const currentCard = this.cards[index];
|
|
108
|
-
currentCard.colSpan += restColumns;
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
ngOnDestroy() {
|
|
113
|
-
if (this.breakpointSubscription) {
|
|
114
|
-
this.breakpointSubscription.unsubscribe();
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
/** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, deps: [{ token: BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
/** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 768px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 768px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 768px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 768px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 768px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 768px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 768px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 768px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 768px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 768px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 768px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, decorators: [{
|
|
121
|
-
type: Component,
|
|
122
|
-
args: [{ standalone: true, imports: [CommonModule, ComponentLoaderDirective], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 768px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 768px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 768px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 768px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 768px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 768px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 768px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 768px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 768px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 768px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 768px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
|
|
123
|
-
}], ctorParameters: function () { return [{ type: BreakpointHelperService }]; }, propDecorators: { maxColumns: [{
|
|
124
|
-
type: HostBinding,
|
|
125
|
-
args: ['attr.max-columns']
|
|
126
|
-
}, {
|
|
127
|
-
type: Input
|
|
128
|
-
}], cardConfigurations: [{
|
|
129
|
-
type: Input
|
|
130
|
-
}] } });
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Generated bundle index. Do not edit.
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
export { BreakpointHelperService, GridCardConfiguration, GridComponent };
|
|
137
|
-
//# sourceMappingURL=kirbydesign-designsystem-grid.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-grid.mjs","sources":["../../../../libs/designsystem/grid/src/breakpoint-helper.service.ts","../../../../libs/designsystem/grid/src/grid-card-configuration.ts","../../../../libs/designsystem/grid/src/grid.component.ts","../../../../libs/designsystem/grid/src/grid.component.html","../../../../libs/designsystem/grid/src/kirbydesign-designsystem-grid.ts"],"sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class BreakpointHelperService implements OnDestroy {\n currentScreenWidth: 800;\n private orientationChangedSubject = new Subject<void>();\n\n constructor() {\n this.init();\n }\n\n private init() {\n // TODO JEO: Implement Angular/CDK BreakpointObserver:\n this.orientationChangedSubject.next();\n }\n\n observe(): Observable<void> {\n return this.orientationChangedSubject.asObservable();\n }\n\n ngOnDestroy() {\n this.orientationChangedSubject.complete();\n }\n}\n","import { Type } from '@angular/core';\nimport { ComponentConfiguration } from '@kirbydesign/designsystem/shared';\n\nexport class GridCardConfiguration implements ComponentConfiguration {\n constructor(public component: Type<any>, public data: any, public preferredSize: number) {}\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnDestroy } from '@angular/core';\nimport { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';\nimport { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';\nimport { Subscription } from 'rxjs';\n\nimport { BreakpointHelperService } from './breakpoint-helper.service';\nimport { GridCardConfiguration } from './grid-card-configuration';\n\nconst GRID_DEPRICATION_WARNING =\n 'Deprecation warning: The \"kirby-grid\" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';\n\nclass GridCard {\n configuration: GridCardConfiguration;\n row: number;\n col: number;\n colSpan: number;\n\n constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {\n this.configuration = configuration;\n this.row = row;\n this.col = col;\n this.colSpan = colSpan;\n }\n}\n\n@Component({\n standalone: true,\n imports: [CommonModule, ComponentLoaderDirective],\n selector: 'kirby-grid',\n templateUrl: './grid.component.html',\n styleUrls: ['./grid.component.scss'],\n})\nexport class GridComponent implements OnDestroy {\n cardConfigs: GridCardConfiguration[];\n cards: GridCard[] = [];\n private breakpointSubscription: Subscription;\n\n @HostBinding('attr.max-columns')\n @Input()\n maxColumns: number;\n\n @Input()\n set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {\n this.cardConfigs = cardConfigurations;\n // TODO TRM/JEO Remove this when breakpoint observe something something...\n this.configureGrid();\n }\n\n constructor(private breakpointHelper: BreakpointHelperService) {\n console.warn(GRID_DEPRICATION_WARNING);\n }\n\n configureGrid() {\n let calculatedMaxColumns = 0;\n if (this.maxColumns === undefined) {\n calculatedMaxColumns =\n this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;\n } else {\n calculatedMaxColumns = this.maxColumns;\n }\n this.cards = [];\n let columnCounter = 0;\n let currentRow = 0;\n let currentColumn = 0;\n\n this.cardConfigs.forEach((card, index) => {\n // Cards colspan is added to the column counter\n columnCounter += card.preferredSize;\n // If only maxColumns are set to 1, just add all cards with a colspan of 1\n if (calculatedMaxColumns === 1) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, 1));\n currentRow += 1;\n return;\n }\n // If we are below maxColumns, then add the card to the array\n if (columnCounter <= calculatedMaxColumns) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn, so the next card will be placed correctly\n currentColumn += card.preferredSize;\n } else {\n // The new card didn't fit - Calculate remaining columns for previous card\n const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);\n const prevCard = this.cards[index - 1];\n // Add the restColumns to the previous cards colspan, to make it span out\n prevCard.colSpan = restColumns + prevCard.colSpan;\n // We are now on a new row\n currentRow += 1;\n currentColumn = 0;\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn to match the size of the new card and reset columnCounter\n currentColumn = card.preferredSize;\n columnCounter = card.preferredSize;\n }\n // If we on the last card, make sure it spans all the rest of the columns\n if (this.cardConfigs.length - 1 === index) {\n const restColumns = calculatedMaxColumns - columnCounter;\n const currentCard = this.cards[index];\n currentCard.colSpan += restColumns;\n }\n });\n }\n\n ngOnDestroy() {\n if (this.breakpointSubscription) {\n this.breakpointSubscription.unsubscribe();\n }\n }\n}\n","<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.BreakpointHelperService"],"mappings":"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"}
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, ViewChild, Input, Injectable, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1$1 from '@ionic/angular';
|
|
4
|
-
import { of, Subject, from, tap, switchMap } from 'rxjs';
|
|
5
|
-
import * as i4 from '@angular/common';
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as i1 from '@kirbydesign/designsystem/types';
|
|
8
|
-
import { IconModule } from '@kirbydesign/designsystem/icon';
|
|
9
|
-
import * as i2 from '@kirbydesign/designsystem/shared';
|
|
10
|
-
import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
|
|
11
|
-
import * as i3 from '@kirbydesign/designsystem/empty-state';
|
|
12
|
-
import { EmptyStateModule } from '@kirbydesign/designsystem/empty-state';
|
|
13
|
-
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
14
|
-
|
|
15
|
-
class AlertExperimentalComponent {
|
|
16
|
-
constructor(elementRef, windowRef) {
|
|
17
|
-
this.elementRef = elementRef;
|
|
18
|
-
this.windowRef = windowRef;
|
|
19
|
-
this.BLUR_WRAPPER_DELAY_IN_MS = 50;
|
|
20
|
-
this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
|
|
21
|
-
}
|
|
22
|
-
set title(title) {
|
|
23
|
-
this.title$ = typeof title === 'string' ? of(title) : title;
|
|
24
|
-
}
|
|
25
|
-
set message(message) {
|
|
26
|
-
this.message$ = typeof message === 'string' ? of(message) : message;
|
|
27
|
-
}
|
|
28
|
-
ngAfterViewInit() {
|
|
29
|
-
setTimeout(() => {
|
|
30
|
-
this.alertWrapper.nativeElement.focus();
|
|
31
|
-
this.alertWrapper.nativeElement.blur();
|
|
32
|
-
}, this.BLUR_WRAPPER_DELAY_IN_MS);
|
|
33
|
-
}
|
|
34
|
-
onFocusChange() {
|
|
35
|
-
// This fixes an undesired scroll behaviour occurring on keyboard-tabbing
|
|
36
|
-
this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
|
|
37
|
-
}
|
|
38
|
-
cancelAlert() {
|
|
39
|
-
const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
|
|
40
|
-
ionModalElement && ionModalElement.dismiss(false);
|
|
41
|
-
}
|
|
42
|
-
approveAlert() {
|
|
43
|
-
const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
|
|
44
|
-
ionModalElement && ionModalElement.dismiss(true);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
/** @nocollapse */ AlertExperimentalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
/** @nocollapse */ AlertExperimentalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertExperimentalComponent, isStandalone: true, selector: "kirby-alert-experimental", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okButton: "okButton", okButtonIsDestructive: "okButtonIsDestructive", cancelButton: "cancelButton" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.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"] }, { kind: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalComponent, decorators: [{
|
|
50
|
-
type: Component,
|
|
51
|
-
args: [{ standalone: true, imports: [
|
|
52
|
-
IconModule,
|
|
53
|
-
EmptyStateModule,
|
|
54
|
-
ButtonComponent,
|
|
55
|
-
CommonModule,
|
|
56
|
-
EmptyStateModule,
|
|
57
|
-
ThemeColorDirective,
|
|
58
|
-
], selector: 'kirby-alert-experimental', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
|
|
59
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.WindowRef }]; }, propDecorators: { alertWrapper: [{
|
|
60
|
-
type: ViewChild,
|
|
61
|
-
args: ['alertWrapper', { static: true }]
|
|
62
|
-
}], title: [{
|
|
63
|
-
type: Input
|
|
64
|
-
}], message: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}], iconName: [{
|
|
67
|
-
type: Input
|
|
68
|
-
}], iconThemeColor: [{
|
|
69
|
-
type: Input
|
|
70
|
-
}], okButton: [{
|
|
71
|
-
type: Input
|
|
72
|
-
}], okButtonIsDestructive: [{
|
|
73
|
-
type: Input
|
|
74
|
-
}], cancelButton: [{
|
|
75
|
-
type: Input
|
|
76
|
-
}] } });
|
|
77
|
-
|
|
78
|
-
class AlertExperimentalController {
|
|
79
|
-
constructor(ionicModalController) {
|
|
80
|
-
this.ionicModalController = ionicModalController;
|
|
81
|
-
}
|
|
82
|
-
showAlert(config) {
|
|
83
|
-
const $onWillDismiss = new Subject();
|
|
84
|
-
const onWillDismiss$ = $onWillDismiss.asObservable();
|
|
85
|
-
const $onDidDismiss = new Subject();
|
|
86
|
-
const onDidDismiss$ = $onDidDismiss.asObservable();
|
|
87
|
-
const modal$ = from(this.ionicModalController.create({
|
|
88
|
-
component: AlertExperimentalComponent,
|
|
89
|
-
componentProps: this.getComponentProps(config),
|
|
90
|
-
cssClass: ['kirby-overlay', 'kirby-alert'],
|
|
91
|
-
mode: 'ios',
|
|
92
|
-
backdropDismiss: false,
|
|
93
|
-
}));
|
|
94
|
-
modal$
|
|
95
|
-
.pipe(tap((modal) => from(modal.present())), switchMap((modal) => modal.onWillDismiss()))
|
|
96
|
-
.subscribe((res) => {
|
|
97
|
-
$onWillDismiss.next(res);
|
|
98
|
-
$onWillDismiss.complete();
|
|
99
|
-
$onDidDismiss.next(res);
|
|
100
|
-
$onDidDismiss.complete();
|
|
101
|
-
});
|
|
102
|
-
return {
|
|
103
|
-
onWillDismiss: onWillDismiss$,
|
|
104
|
-
onDidDismiss: onDidDismiss$,
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
getComponentProps(config) {
|
|
108
|
-
return {
|
|
109
|
-
...config,
|
|
110
|
-
okButton: this.getOkButton(config),
|
|
111
|
-
cancelButton: config.cancelButton,
|
|
112
|
-
okButtonIsDestructive: this.getOkButtonIsDestructive(config),
|
|
113
|
-
iconName: config.icon && config.icon.name,
|
|
114
|
-
iconThemeColor: config.icon && config.icon.themeColor,
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
getOkButton(config) {
|
|
118
|
-
let text;
|
|
119
|
-
if (config.okButton) {
|
|
120
|
-
if (typeof config.okButton === 'string') {
|
|
121
|
-
text = config.okButton;
|
|
122
|
-
}
|
|
123
|
-
else {
|
|
124
|
-
text = config.okButton.text;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
return text;
|
|
128
|
-
}
|
|
129
|
-
getOkButtonIsDestructive(config) {
|
|
130
|
-
return typeof config.okButton === 'object' ? config.okButton.isDestructive : undefined;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
/** @nocollapse */ AlertExperimentalController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
134
|
-
/** @nocollapse */ AlertExperimentalController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController });
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalController, decorators: [{
|
|
136
|
-
type: Injectable
|
|
137
|
-
}], ctorParameters: function () { return [{ type: i1$1.ModalController }]; } });
|
|
138
|
-
|
|
139
|
-
class AlertExperimentalModule {
|
|
140
|
-
}
|
|
141
|
-
/** @nocollapse */ AlertExperimentalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
142
|
-
/** @nocollapse */ AlertExperimentalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, imports: [CommonModule, AlertExperimentalComponent] });
|
|
143
|
-
/** @nocollapse */ AlertExperimentalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, providers: [AlertExperimentalController], imports: [CommonModule, AlertExperimentalComponent] });
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertExperimentalModule, decorators: [{
|
|
145
|
-
type: NgModule,
|
|
146
|
-
args: [{
|
|
147
|
-
imports: [CommonModule, AlertExperimentalComponent],
|
|
148
|
-
providers: [AlertExperimentalController],
|
|
149
|
-
}]
|
|
150
|
-
}] });
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Generated bundle index. Do not edit.
|
|
154
|
-
*/
|
|
155
|
-
|
|
156
|
-
export { AlertExperimentalComponent, AlertExperimentalController, AlertExperimentalModule };
|
|
157
|
-
//# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-alert-experimental.mjs","sources":["../../../../libs/designsystem/alert-experimental/src/alert.component.ts","../../../../libs/designsystem/alert-experimental/src/alert.component.html","../../../../libs/designsystem/alert-experimental/src/services/alert.controller.ts","../../../../libs/designsystem/alert-experimental/src/alert.module.ts","../../../../libs/designsystem/alert-experimental/src/kirbydesign-designsystem-alert-experimental.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { Observable, of } from 'rxjs';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateModule } from '@kirbydesign/designsystem/empty-state';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ThemeColor } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n standalone: true,\n imports: [\n IconModule,\n EmptyStateModule,\n ButtonComponent,\n CommonModule,\n EmptyStateModule,\n ThemeColorDirective,\n ],\n selector: 'kirby-alert-experimental',\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: { '[class.ion-page]': 'false' }, //Ensure ion-page class doesn't get applied by Ionic Modal Controller\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlertExperimentalComponent implements AfterViewInit {\n readonly BLUR_WRAPPER_DELAY_IN_MS = 50;\n @ViewChild('alertWrapper', { static: true }) private alertWrapper: ElementRef;\n private scrollY: number = Math.abs(this.windowRef.nativeWindow.scrollY);\n\n title$: Observable<string>;\n @Input()\n set title(title: string | Observable<string>) {\n this.title$ = typeof title === 'string' ? of(title) : title;\n }\n\n message$: Observable<string>;\n @Input()\n set message(message: string & Observable<string>) {\n this.message$ = typeof message === 'string' ? of(message) : message;\n }\n\n @Input() iconName: string;\n @Input() iconThemeColor: ThemeColor | `${ThemeColor}`;\n @Input() okButton: string;\n @Input() okButtonIsDestructive: boolean;\n @Input() cancelButton: string;\n\n constructor(private elementRef: ElementRef<HTMLElement>, private windowRef: WindowRef) {}\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n this.alertWrapper.nativeElement.focus();\n this.alertWrapper.nativeElement.blur();\n }, this.BLUR_WRAPPER_DELAY_IN_MS);\n }\n\n onFocusChange() {\n // This fixes an undesired scroll behaviour occurring on keyboard-tabbing\n this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });\n }\n\n cancelAlert() {\n const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n ionModalElement && ionModalElement.dismiss(false);\n }\n\n approveAlert() {\n const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n ionModalElement && ionModalElement.dismiss(true);\n }\n}\n","<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelButton\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"cancelAlert()\"\n >\n {{ cancelButton }}\n </button>\n <button\n kirby-button\n [size]=\"cancelButton ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [class.destructive]=\"okButtonIsDestructive\"\n (click)=\"approveAlert()\"\n >\n {{ okButton }}\n </button>\n </div>\n</article>\n","import { Injectable } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { from, Observable, Subject, switchMap, tap } from 'rxjs';\nimport { OverlayEventDetail } from '@ionic/core/components';\nimport { AlertExperimentalComponent } from '../alert.component';\nimport { AlertExperimentalConfig } from '../config/alert-config';\n\ntype AlertDismissObservables = {\n onWillDismiss: Observable<OverlayEventDetail>;\n onDidDismiss: Observable<OverlayEventDetail>;\n};\n\n@Injectable()\nexport class AlertExperimentalController {\n constructor(private ionicModalController: ModalController) {}\n\n public showAlert(config: AlertExperimentalConfig): AlertDismissObservables {\n const $onWillDismiss = new Subject<OverlayEventDetail>();\n const onWillDismiss$ = $onWillDismiss.asObservable();\n\n const $onDidDismiss = new Subject<OverlayEventDetail>();\n const onDidDismiss$ = $onDidDismiss.asObservable();\n\n const modal$ = from(\n this.ionicModalController.create({\n component: AlertExperimentalComponent,\n componentProps: this.getComponentProps(config),\n cssClass: ['kirby-overlay', 'kirby-alert'],\n mode: 'ios',\n backdropDismiss: false,\n })\n );\n\n modal$\n .pipe(\n tap((modal) => from(modal.present())),\n switchMap((modal) => modal.onWillDismiss())\n )\n .subscribe((res) => {\n $onWillDismiss.next(res);\n $onWillDismiss.complete();\n\n $onDidDismiss.next(res);\n $onDidDismiss.complete();\n });\n\n return {\n onWillDismiss: onWillDismiss$,\n onDidDismiss: onDidDismiss$,\n };\n }\n\n private getComponentProps(config: AlertExperimentalConfig) {\n return {\n ...config,\n okButton: this.getOkButton(config),\n cancelButton: config.cancelButton,\n okButtonIsDestructive: this.getOkButtonIsDestructive(config),\n iconName: config.icon && config.icon.name,\n iconThemeColor: config.icon && config.icon.themeColor,\n };\n }\n\n private getOkButton(config: AlertExperimentalConfig) {\n let text: string;\n\n if (config.okButton) {\n if (typeof config.okButton === 'string') {\n text = config.okButton;\n } else {\n text = config.okButton.text;\n }\n }\n return text;\n }\n\n getOkButtonIsDestructive(config) {\n return typeof config.okButton === 'object' ? config.okButton.isDestructive : undefined;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AlertExperimentalComponent } from './alert.component';\nimport { AlertExperimentalController } from './services/alert.controller';\n\n@NgModule({\n imports: [CommonModule, AlertExperimentalComponent],\n providers: [AlertExperimentalController],\n})\nexport class AlertExperimentalModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":";;;;;;;;;;;;;;MAkCa,0BAA0B,CAAA;IAuBrC,WAAoB,CAAA,UAAmC,EAAU,SAAoB,EAAA;QAAjE,IAAU,CAAA,UAAA,GAAV,UAAU,CAAyB;QAAU,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAtB5E,IAAwB,CAAA,wBAAA,GAAG,EAAE,CAAC;AAE/B,QAAA,IAAA,CAAA,OAAO,GAAW,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;KAoBiB;IAjBzF,IACI,KAAK,CAAC,KAAkC,EAAA;AAC1C,QAAA,IAAI,CAAC,MAAM,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;KAC7D;IAGD,IACI,OAAO,CAAC,OAAoC,EAAA;AAC9C,QAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,OAAO,KAAK,QAAQ,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;KACrE;IAUD,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;AACxC,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;AACzC,SAAC,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACnC;IAED,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC7D;IAED,WAAW,GAAA;AACT,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AAC3E,QAAA,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACnD;IAED,YAAY,GAAA;AACV,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AAC3E,QAAA,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAClD;;0IA7CU,0BAA0B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;8HAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClCvC,mtBA6BA,EDTI,MAAA,EAAA,CAAA,wNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,UAAU,oWACV,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,cAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAWH,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAjBtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA;wBACP,UAAU;wBACV,gBAAgB;wBAChB,eAAe;wBACf,YAAY;wBACZ,gBAAgB;wBAChB,mBAAmB;qBACpB,EACS,QAAA,EAAA,0BAA0B,EAI9B,IAAA,EAAA,EAAE,kBAAkB,EAAE,OAAO,EAAE,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mtBAAA,EAAA,MAAA,EAAA,CAAA,wNAAA,CAAA,EAAA,CAAA;yHAIM,YAAY,EAAA,CAAA;sBAAhE,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,cAAc,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAKvC,KAAK,EAAA,CAAA;sBADR,KAAK;gBAOF,OAAO,EAAA,CAAA;sBADV,KAAK;gBAKG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;;;ME1CK,2BAA2B,CAAA;AACtC,IAAA,WAAA,CAAoB,oBAAqC,EAAA;QAArC,IAAoB,CAAA,oBAAA,GAApB,oBAAoB,CAAiB;KAAI;AAEtD,IAAA,SAAS,CAAC,MAA+B,EAAA;AAC9C,QAAA,MAAM,cAAc,GAAG,IAAI,OAAO,EAAsB,CAAC;AACzD,QAAA,MAAM,cAAc,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;AAErD,QAAA,MAAM,aAAa,GAAG,IAAI,OAAO,EAAsB,CAAC;AACxD,QAAA,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,EAAE,CAAC;QAEnD,MAAM,MAAM,GAAG,IAAI,CACjB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;AAC/B,YAAA,SAAS,EAAE,0BAA0B;AACrC,YAAA,cAAc,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;AAC9C,YAAA,QAAQ,EAAE,CAAC,eAAe,EAAE,aAAa,CAAC;AAC1C,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,eAAe,EAAE,KAAK;AACvB,SAAA,CAAC,CACH,CAAC;QAEF,MAAM;AACH,aAAA,IAAI,CACH,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EACrC,SAAS,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC,CAC5C;AACA,aAAA,SAAS,CAAC,CAAC,GAAG,KAAI;AACjB,YAAA,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzB,cAAc,CAAC,QAAQ,EAAE,CAAC;AAE1B,YAAA,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACxB,aAAa,CAAC,QAAQ,EAAE,CAAC;AAC3B,SAAC,CAAC,CAAC;QAEL,OAAO;AACL,YAAA,aAAa,EAAE,cAAc;AAC7B,YAAA,YAAY,EAAE,aAAa;SAC5B,CAAC;KACH;AAEO,IAAA,iBAAiB,CAAC,MAA+B,EAAA;QACvD,OAAO;AACL,YAAA,GAAG,MAAM;AACT,YAAA,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;YAClC,YAAY,EAAE,MAAM,CAAC,YAAY;AACjC,YAAA,qBAAqB,EAAE,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC;YAC5D,QAAQ,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI;YACzC,cAAc,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU;SACtD,CAAC;KACH;AAEO,IAAA,WAAW,CAAC,MAA+B,EAAA;AACjD,QAAA,IAAI,IAAY,CAAC;QAEjB,IAAI,MAAM,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,EAAE;AACvC,gBAAA,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC;AACxB,aAAA;AAAM,iBAAA;AACL,gBAAA,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7B,aAAA;AACF,SAAA;AACD,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,wBAAwB,CAAC,MAAM,EAAA;AAC7B,QAAA,OAAO,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC;KACxF;;2IAjEU,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;+IAA3B,2BAA2B,EAAA,CAAA,CAAA;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBADvC,UAAU;;;MCHE,uBAAuB,CAAA;;uIAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;wIAAvB,uBAAuB,EAAA,OAAA,EAAA,CAHxB,YAAY,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA;AAGvC,mBAAA,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,aAFvB,CAAC,2BAA2B,CAAC,EAD9B,OAAA,EAAA,CAAA,YAAY,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA;2FAGvC,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,0BAA0B,CAAC;oBACnD,SAAS,EAAE,CAAC,2BAA2B,CAAC;AACzC,iBAAA,CAAA;;;ACRD;;AAEG;;;;"}
|