@kirbydesign/designsystem 8.2.0-rc.2 → 8.3.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/README.md +7 -0
- package/action-group/action-group.component.d.ts +10 -6
- package/button/button.component.d.ts +2 -1
- package/button/public_api.d.ts +1 -1
- package/dropdown/keyboard-handler.service.d.ts +1 -1
- package/esm2020/action-group/action-group.component.mjs +25 -29
- package/esm2020/button/button.component.mjs +3 -3
- package/esm2020/button/public_api.mjs +2 -2
- package/esm2020/card/card.component.mjs +2 -2
- package/esm2020/dropdown/dropdown.component.mjs +4 -4
- package/esm2020/dropdown/dropdown.module.mjs +1 -1
- package/esm2020/dropdown/keyboard-handler.service.mjs +12 -7
- package/esm2020/header/header.component.mjs +12 -26
- package/esm2020/header/public_api.mjs +2 -2
- package/esm2020/item/item.component.mjs +2 -2
- package/esm2020/lib/index.mjs +3 -1
- package/esm2020/lib/kirby.module.mjs +22 -5
- package/esm2020/list/list-item/list-item.component.mjs +2 -2
- package/esm2020/list/list.component.mjs +2 -2
- package/esm2020/menu/kirbydesign-designsystem-menu.mjs +5 -0
- package/esm2020/menu/menu.component.mjs +69 -0
- package/esm2020/menu/public_api.mjs +2 -0
- package/esm2020/modal/modal/footer/modal-footer.component.mjs +3 -3
- package/esm2020/modal/v2/footer/footer.component.mjs +2 -2
- package/esm2020/modal/v2/modal-routing/modal-routing.component.mjs +3 -3
- package/esm2020/page/page-footer/page-footer.component.mjs +2 -2
- package/esm2020/page/page.component.mjs +37 -30
- package/esm2020/page/public_api.mjs +2 -12
- package/esm2020/shared/floating/floating.directive.mjs +91 -24
- package/esm2020/shared/floating/public_api.mjs +2 -2
- package/esm2020/tab-navigation/kirbydesign-designsystem-tab-navigation.mjs +5 -0
- package/esm2020/tab-navigation/public_api.mjs +4 -0
- package/esm2020/tab-navigation/tab-navigation/tab-navigation.component.mjs +121 -0
- package/esm2020/tab-navigation/tab-navigation-item/tab-navigation-item.component.mjs +17 -0
- package/esm2020/tab-navigation/tab-navigation.module.mjs +19 -0
- package/fesm2015/kirbydesign-designsystem-accordion.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-action-group.mjs +25 -30
- package/fesm2015/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-alert-experimental.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-avatar.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-button.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-calendar.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-card.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-chart.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-checkbox.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-data-table.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-divider.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-dropdown.mjs +15 -11
- package/fesm2015/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-empty-state.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-fab-sheet.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-flag.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-form-field.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-grid.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-header.mjs +12 -29
- package/fesm2015/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-helpers-scss.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-helpers.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-icon.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item-group.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item-sliding.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-kirby-app.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-list.mjs +4 -5
- package/fesm2015/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-loading-overlay.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-menu.mjs +76 -0
- package/fesm2015/kirbydesign-designsystem-menu.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs +4 -5
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-modal.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-page.mjs +38 -32
- package/fesm2015/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-popover.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-progress-circle.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-radio.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-range.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-reorder-list.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-router-outlet.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-section-header.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-shared-floating.mjs +92 -25
- package/fesm2015/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-shared-portal.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-shared.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-slide-button.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-slide.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-spinner.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs +156 -0
- package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem-tabs.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toast.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toggle-button.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toggle.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-types.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem.mjs +23 -5
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-accordion.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-action-group.mjs +25 -30
- package/fesm2020/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-avatar.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-button.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-calendar.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-card.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-chart.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-checkbox.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-data-table.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-divider.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-dropdown.mjs +15 -11
- package/fesm2020/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-empty-state.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-fab-sheet.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-flag.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-form-field.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-grid.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-header.mjs +12 -27
- package/fesm2020/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-helpers-scss.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-helpers.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-icon.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item-group.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item-sliding.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-kirby-app.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-list.mjs +4 -5
- package/fesm2020/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-loading-overlay.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-menu.mjs +76 -0
- package/fesm2020/kirbydesign-designsystem-menu.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs +4 -5
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-modal.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-page.mjs +38 -32
- package/fesm2020/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-popover.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-progress-circle.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-radio.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-range.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-reorder-list.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-router-outlet.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-section-header.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-shared-floating.mjs +91 -25
- package/fesm2020/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-shared-portal.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-shared.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-slide-button.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-slide.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-spinner.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs +155 -0
- package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem-tabs.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toast.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toggle-button.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toggle.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-types.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem.mjs +23 -5
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/header/header.component.d.ts +5 -11
- package/header/public_api.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/kirby.module.d.ts +42 -39
- package/menu/index.d.ts +5 -0
- package/menu/menu.component.d.ts +31 -0
- package/menu/public_api.d.ts +1 -0
- package/package.json +18 -2
- package/page/page.component.d.ts +12 -5
- package/page/public_api.d.ts +1 -12
- package/shared/floating/floating.directive.d.ts +30 -4
- package/shared/floating/public_api.d.ts +1 -1
- package/tab-navigation/index.d.ts +5 -0
- package/tab-navigation/public_api.d.ts +3 -0
- package/tab-navigation/tab-navigation/tab-navigation.component.d.ts +30 -0
- package/tab-navigation/tab-navigation-item/tab-navigation-item.component.d.ts +7 -0
- package/tab-navigation/tab-navigation.module.d.ts +9 -0
- package/icon/src/README.md +0 -16
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Input,
|
|
3
|
+
import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, ViewChild, HostBinding } from '@angular/core';
|
|
4
4
|
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
5
5
|
import * as i1 from '@kirbydesign/designsystem/dropdown';
|
|
6
6
|
import { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';
|
|
@@ -10,10 +10,12 @@ class ActionGroupComponent {
|
|
|
10
10
|
constructor(renderer, config) {
|
|
11
11
|
this.renderer = renderer;
|
|
12
12
|
this.config = config;
|
|
13
|
-
this.
|
|
13
|
+
this.align = 'end';
|
|
14
14
|
this._collapsedActions = [];
|
|
15
15
|
this._isResizeable = false;
|
|
16
|
-
|
|
16
|
+
}
|
|
17
|
+
get _align() {
|
|
18
|
+
return 'align-' + this.align;
|
|
17
19
|
}
|
|
18
20
|
ngAfterContentInit() {
|
|
19
21
|
var _a;
|
|
@@ -28,22 +30,19 @@ class ActionGroupComponent {
|
|
|
28
30
|
this.initializeCollapsing();
|
|
29
31
|
}
|
|
30
32
|
}
|
|
31
|
-
|
|
32
|
-
const selectedIndex = this.dropdown.selectedIndex;
|
|
33
|
-
const selectedAction = this.hiddenButtons[selectedIndex];
|
|
33
|
+
onActionSelect(action) {
|
|
34
34
|
// Dropdown should not persist selected item, we want it to be re-selectable
|
|
35
35
|
this.dropdown.selectedIndex = -1;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
selectedAction.dispatchEvent(event);
|
|
43
|
-
}
|
|
36
|
+
const event = new PointerEvent('click', {
|
|
37
|
+
bubbles: true,
|
|
38
|
+
cancelable: true,
|
|
39
|
+
view: window,
|
|
40
|
+
});
|
|
41
|
+
action.button.dispatchEvent(event);
|
|
44
42
|
}
|
|
45
43
|
initializeCollapsing() {
|
|
46
|
-
|
|
44
|
+
const collapseThreshold = 2;
|
|
45
|
+
if (this.buttonElements.length <= collapseThreshold)
|
|
47
46
|
return;
|
|
48
47
|
this.moveButtons();
|
|
49
48
|
this.populateDropdown();
|
|
@@ -60,21 +59,18 @@ class ActionGroupComponent {
|
|
|
60
59
|
this._isCollapsed = hasHiddenButtons;
|
|
61
60
|
}
|
|
62
61
|
populateDropdown() {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
*/
|
|
69
|
-
this.hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
|
|
70
|
-
this._collapsedActions = this.hiddenButtons.map((button) => button.textContent.trim());
|
|
62
|
+
const hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
|
|
63
|
+
this._collapsedActions = hiddenButtons.map((button) => ({
|
|
64
|
+
button,
|
|
65
|
+
text: button.textContent.trim(),
|
|
66
|
+
}));
|
|
71
67
|
}
|
|
72
68
|
}
|
|
73
69
|
/** @nocollapse */ ActionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
-
/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions",
|
|
70
|
+
/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class.is-resizeable": "this._isResizeable", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n [items]=\"_collapsedActions\"\n [usePopover]=\"true\"\n [_isMoreMenu]=\"true\"\n popout=\"left\"\n (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}:host(.is-collapsed) kirby-dropdown{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i1.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover", "_isMoreMenu"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, decorators: [{
|
|
76
72
|
type: Component,
|
|
77
|
-
args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, DropdownModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n [items]=\"_collapsedActions\"\n [usePopover]=\"true\"\n [_isMoreMenu]=\"true\"\n popout=\"left\"\n (change)=\"
|
|
73
|
+
args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, DropdownModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n [items]=\"_collapsedActions\"\n [usePopover]=\"true\"\n [_isMoreMenu]=\"true\"\n popout=\"left\"\n (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}:host(.is-collapsed) kirby-dropdown{display:inline-block}\n"] }]
|
|
78
74
|
}], ctorParameters: function () {
|
|
79
75
|
return [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
80
76
|
type: Optional
|
|
@@ -86,10 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
86
82
|
type: Input
|
|
87
83
|
}], emphasizeActions: [{
|
|
88
84
|
type: Input
|
|
89
|
-
}],
|
|
90
|
-
type: HostBinding,
|
|
91
|
-
args: ['class']
|
|
92
|
-
}, {
|
|
85
|
+
}], align: [{
|
|
93
86
|
type: Input
|
|
94
87
|
}], buttonElements: [{
|
|
95
88
|
type: ContentChildren,
|
|
@@ -109,6 +102,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
109
102
|
}], _isResizeable: [{
|
|
110
103
|
type: HostBinding,
|
|
111
104
|
args: ['class.is-resizeable']
|
|
105
|
+
}], _align: [{
|
|
106
|
+
type: HostBinding,
|
|
107
|
+
args: ['class']
|
|
112
108
|
}] } });
|
|
113
109
|
|
|
114
110
|
/**
|
|
@@ -117,4 +113,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
117
113
|
|
|
118
114
|
export { ACTIONGROUP_CONFIG, ActionGroupComponent };
|
|
119
115
|
//# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map
|
|
120
|
-
//# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n HostBinding,\n Inject,\n InjectionToken,\n Input,\n Optional,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';\n\nexport type ActionGroupConfig = {\n isResizable?: boolean;\n isCondensed?: boolean;\n visibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\n@Component({\n selector: 'kirby-action-group',\n standalone: true,\n imports: [CommonModule, ButtonComponent, DropdownModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './action-group.component.html',\n styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit {\n @Input() visibleActions?: number;\n\n @Input() emphasizeActions?: boolean;\n\n @
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n HostBinding,\n Inject,\n InjectionToken,\n Input,\n Optional,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';\n\nexport type ActionGroupConfig = {\n isResizable?: boolean;\n isCondensed?: boolean;\n visibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n selector: 'kirby-action-group',\n standalone: true,\n imports: [CommonModule, ButtonComponent, DropdownModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './action-group.component.html',\n styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit {\n @Input() visibleActions?: number;\n\n @Input() emphasizeActions?: boolean;\n\n @Input()\n align: 'start' | 'end' = 'end';\n\n @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n ElementRef<HTMLButtonElement>\n >;\n @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n private hiddenLayer!: ElementRef<HTMLElement>;\n /*\n * TEMPORARY MORE-MENU\n * dropdown ViewChild is only used for temporary more-menu\n */\n @ViewChild(DropdownComponent) private dropdown!: DropdownComponent;\n\n @HostBinding('class.is-collapsed')\n _isCollapsed: boolean;\n _collapsedActions: CollapsedAction[] = [];\n\n @HostBinding('class.is-resizeable')\n _isResizeable = false;\n\n @HostBinding('class')\n get _align() {\n return 'align-' + this.align;\n }\n\n constructor(\n private renderer: Renderer2,\n @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n ) {}\n\n ngAfterContentInit(): void {\n if (this.config) {\n this._isResizeable = this.config.isResizable;\n this.visibleActions = this.config.visibleActions;\n if (this.config.isCondensed) {\n this.buttons?.forEach((button) => (button.showIconOnly = true));\n }\n }\n\n if (this.visibleActions) {\n this.initializeCollapsing();\n }\n }\n\n onActionSelect(action: CollapsedAction) {\n // Dropdown should not persist selected item, we want it to be re-selectable\n this.dropdown.selectedIndex = -1;\n\n const event = new PointerEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n\n action.button.dispatchEvent(event);\n }\n\n private initializeCollapsing() {\n const collapseThreshold = 2;\n if (this.buttonElements.length <= collapseThreshold) return;\n\n this.moveButtons();\n this.populateDropdown();\n this.toggleDropdown();\n }\n\n private moveButtons() {\n const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n buttonsToHide.forEach((button) => {\n this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n });\n }\n\n private toggleDropdown() {\n const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n this._isCollapsed = hasHiddenButtons;\n }\n\n private populateDropdown() {\n const hiddenButtons = Array.from(\n this.hiddenLayer.nativeElement.children\n ) as HTMLButtonElement[];\n\n this._collapsedActions = hiddenButtons.map((button) => ({\n button,\n text: button.textContent.trim(),\n }));\n }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n [items]=\"_collapsedActions\"\n [usePopover]=\"true\"\n [_isMoreMenu]=\"true\"\n popout=\"left\"\n (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -148,4 +148,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
148
148
|
|
|
149
149
|
export { AlertExperimentalComponent, AlertExperimentalController, AlertExperimentalModule };
|
|
150
150
|
//# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map
|
|
151
|
-
//# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map
|
|
@@ -111,10 +111,10 @@ class ButtonComponent {
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
/** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
-
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
114
|
+
/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
115
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
116
116
|
type: Component,
|
|
117
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"] }]
|
|
117
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"] }]
|
|
118
118
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { isAttentionLevel1: [{
|
|
119
119
|
type: HostBinding,
|
|
120
120
|
args: ['class.attention-level1']
|
|
@@ -167,4 +167,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
167
167
|
|
|
168
168
|
export { ButtonComponent, ButtonSize };
|
|
169
169
|
//# sourceMappingURL=kirbydesign-designsystem-button.mjs.map
|
|
170
|
-
//# sourceMappingURL=kirbydesign-designsystem-button.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @HostBinding('class.attention-level1')\n isAttentionLevel1: boolean = true; // Default\n @HostBinding('class.attention-level2')\n isAttentionLevel2: boolean;\n @HostBinding('class.attention-level3')\n isAttentionLevel3: boolean;\n @Input() set attentionLevel(level: '1' | '2' | '3' | '4') {\n this.isAttentionLevel1 = level === '1';\n this.isAttentionLevel2 = level === '2';\n this.isAttentionLevel3 = level === '3' || level === '4';\n if (level === '4') {\n console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n }\n }\n\n @HostBinding('class.no-decoration')\n hasNoDecoration = false;\n @Input()\n set noDecoration(enable: boolean) {\n this.hasNoDecoration = enable;\n this.isAttentionLevel1 = !enable;\n this.isAttentionLevel2 = false;\n this.isAttentionLevel3 = false;\n }\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' | 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n}\n","<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\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-button.mjs","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type AttentionLevel = '1' | '2' | '3' | '4';\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n 'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @HostBinding('class.attention-level1')\n isAttentionLevel1: boolean = true; // Default\n @HostBinding('class.attention-level2')\n isAttentionLevel2: boolean;\n @HostBinding('class.attention-level3')\n isAttentionLevel3: boolean;\n @Input() set attentionLevel(level: AttentionLevel) {\n this.isAttentionLevel1 = level === '1';\n this.isAttentionLevel2 = level === '2';\n this.isAttentionLevel3 = level === '3' || level === '4';\n if (level === '4') {\n console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n }\n }\n\n @HostBinding('class.no-decoration')\n hasNoDecoration = false;\n @Input()\n set noDecoration(enable: boolean) {\n this.hasNoDecoration = enable;\n this.isAttentionLevel1 = !enable;\n this.isAttentionLevel2 = false;\n this.isAttentionLevel3 = false;\n }\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' | 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n}\n","<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -101,10 +101,10 @@ class CardComponent {
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
/** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--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);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--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: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] });
|
|
104
|
+
/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--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;border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--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: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] });
|
|
105
105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
|
-
args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--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);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--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: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
|
|
107
|
+
args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--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;border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--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: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
|
|
108
108
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
|
|
109
109
|
type: Input
|
|
110
110
|
}], subtitle: [{
|
|
@@ -222,4 +222,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
222
222
|
|
|
223
223
|
export { CardAsButtonDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule };
|
|
224
224
|
//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map
|
|
225
|
-
//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @HostBinding('class')\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class.flat')\n @Input()\n flat: boolean = false;\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n\n @HostBinding('class.interaction-state-active') _pressed = false;\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n ngOnInit(): void {\n if (this.card) {\n this.card.flat = false;\n }\n }\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /*\n * Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n */\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @HostBinding('class')\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n","import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n @HostBinding('class.flat')\n @Input()\n flat: boolean = false;\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n\n @HostBinding('class.interaction-state-active') _pressed = false;\n constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n ngOnInit(): void {\n if (this.card) {\n this.card.flat = false;\n }\n }\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /*\n * Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n */\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n CardComponent,\n CardFooterComponent,\n CardHeaderComponent,\n CardAsButtonDirective,\n];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective],\n declarations: [...declarations],\n exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}
|
|
@@ -1516,4 +1516,3 @@ const getChartStockShortDateTime = (dateInMiliseconds, locale) => {
|
|
|
1516
1516
|
|
|
1517
1517
|
export { BarChartConfig, BaseChartComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, StockChartComponent, StockChartConfig, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, isNumberArray };
|
|
1518
1518
|
//# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map
|
|
1519
|
-
//# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map
|
|
@@ -70,4 +70,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
70
70
|
|
|
71
71
|
export { DataTableModule, TableComponent, TableRowComponent };
|
|
72
72
|
//# sourceMappingURL=kirbydesign-designsystem-data-table.mjs.map
|
|
73
|
-
//# sourceMappingURL=kirbydesign-designsystem-data-table.mjs.map
|