@kirbydesign/designsystem 4.0.13 → 4.0.14
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/bundles/kirbydesign-designsystem.umd.js +16 -2
- package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
- package/esm2015/lib/components/segmented-control/segment-item.js +1 -1
- package/esm2015/lib/components/segmented-control/segment-item.metadata.json +1 -1
- package/esm2015/lib/components/segmented-control/segmented-control.component.js +17 -3
- package/esm2015/lib/components/segmented-control/segmented-control.component.metadata.json +1 -1
- package/fesm2015/kirbydesign-designsystem.js +15 -2
- package/fesm2015/kirbydesign-designsystem.js.map +1 -1
- package/kirbydesign-designsystem.metadata.json +1 -1
- package/lib/components/segmented-control/segment-item.d.ts +12 -6
- package/lib/components/segmented-control/segmented-control.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudC1pdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnQtaXRlbS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVGhlbWVDb2xvciB9IGZyb20gJ0BraXJieWRlc2lnbi9jb3JlJztcblxudHlwZSBTZWdtZW50SXRlbUJhZGdlID0ge1xuICBjb250ZW50Pzogc3RyaW5nO1xuICBpY29uPzogc3RyaW5nO1xuICBpc0N1c3RvbUljb24/OiBib29sZWFuO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgdGhlbWVDb2xvcjogVGhlbWVDb2xvcjtcbn07XG5leHBvcnQgaW50ZXJmYWNlIFNlZ21lbnRJdGVtIHtcbiAgaWQ6IHN0cmluZztcbiAgdGV4dDogc3RyaW5nO1xuICAvKipcbiAgICogQGRlcHJlY2F0ZWQgV2lsbCBiZSByZW1vdmVkIGluIG5leHQgbWFqb3IgdmVyc2lvbi4gVXNlIGBzZWxlY3RlZEluZGV4YCBvciBgdmFsdWVgIG9uIGA8a2lyYnktc2VnbWVudGVkLWNvbnRyb2w+YCBpbnN0ZWFkLlxuICAgKi9cbiAgY2hlY2tlZD86IGJvb2xlYW47XG4gIGJhZGdlPzogT21pdDxTZWdtZW50SXRlbUJhZGdlLCAnaXNDdXN0b21JY29uJz47IC8vIHdlIGRvIG5vdCBleHBvc2UgdGhlIGlzQ3VzdG9tSWNvbiBmb3IgdGhlIGV4dGVybmFsIHR5cGVcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTZWdtZW50SXRlbUludGVybmFsIGV4dGVuZHMgU2VnbWVudEl0ZW0ge1xuICBiYWRnZT86IFNlZ21lbnRJdGVtQmFkZ2U7XG59XG4iXX0=
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"SegmentItem":{"__symbolic":"interface"}}}]
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"SegmentItem":{"__symbolic":"interface"},"SegmentItemInternal":{"__symbolic":"interface"}}}]
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { IconRegistryService } from '../icon/icon-registry.service';
|
|
2
3
|
export var SegmentedControlMode;
|
|
3
4
|
(function (SegmentedControlMode) {
|
|
4
5
|
SegmentedControlMode["chip"] = "chip";
|
|
@@ -6,7 +7,8 @@ export var SegmentedControlMode;
|
|
|
6
7
|
SegmentedControlMode["default"] = "default";
|
|
7
8
|
})(SegmentedControlMode || (SegmentedControlMode = {}));
|
|
8
9
|
export class SegmentedControlComponent {
|
|
9
|
-
constructor() {
|
|
10
|
+
constructor(iconRegistryService) {
|
|
11
|
+
this.iconRegistryService = iconRegistryService;
|
|
10
12
|
this.mode = SegmentedControlMode.default;
|
|
11
13
|
this._items = [];
|
|
12
14
|
this._selectedIndex = -1;
|
|
@@ -31,6 +33,14 @@ export class SegmentedControlComponent {
|
|
|
31
33
|
}
|
|
32
34
|
set items(value) {
|
|
33
35
|
this._items = value || [];
|
|
36
|
+
this._items.forEach((item) => {
|
|
37
|
+
if (item.badge === undefined)
|
|
38
|
+
return;
|
|
39
|
+
// We need to verify whether badges icon is custom or default, so we can check for it in the template
|
|
40
|
+
item.badge.isCustomIcon =
|
|
41
|
+
item.badge.icon !== undefined &&
|
|
42
|
+
this.iconRegistryService.getIcon(item.badge.icon) !== undefined;
|
|
43
|
+
});
|
|
34
44
|
const checkedItemIndex = this.items.findIndex((item) => item.checked);
|
|
35
45
|
if (checkedItemIndex > -1) {
|
|
36
46
|
console.warn('SegmentItem.checked is deprecated - please remove from your `items` configuration. Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead ');
|
|
@@ -67,12 +77,16 @@ export class SegmentedControlComponent {
|
|
|
67
77
|
SegmentedControlComponent.decorators = [
|
|
68
78
|
{ type: Component, args: [{
|
|
69
79
|
selector: 'kirby-segmented-control',
|
|
70
|
-
template: "<ion-segment\n *ngIf=\"mode === 'default'\"\n [value]=\"value?.id\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventWrapperClick($event)\"\n>\n <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n <kirby-badge\n *ngIf=\"item.badge\"\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <kirby-icon\n
|
|
80
|
+
template: "<ion-segment\n *ngIf=\"mode === 'default'\"\n [value]=\"value?.id\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventWrapperClick($event)\"\n>\n <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n <kirby-badge\n *ngIf=\"item.badge\"\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n <kirby-chip\n *ngFor=\"let item of items; let index = index\"\n [text]=\"item.text\"\n [isSelected]=\"index === selectedIndex\"\n (click)=\"onSegmentSelect(item.id)\"\n role=\"button\"\n ></kirby-chip>\n</ng-container>\n",
|
|
71
81
|
// tslint:disable-next-line: no-host-metadata-property
|
|
72
82
|
host: { role: 'group' },
|
|
73
83
|
styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
|
|
74
84
|
},] }
|
|
75
85
|
];
|
|
86
|
+
/** @nocollapse */
|
|
87
|
+
SegmentedControlComponent.ctorParameters = () => [
|
|
88
|
+
{ type: IconRegistryService }
|
|
89
|
+
];
|
|
76
90
|
SegmentedControlComponent.propDecorators = {
|
|
77
91
|
mode: [{ type: Input }],
|
|
78
92
|
_modeCssClass: [{ type: HostBinding, args: ['class',] }],
|
|
@@ -83,4 +97,4 @@ SegmentedControlComponent.propDecorators = {
|
|
|
83
97
|
size: [{ type: Input }],
|
|
84
98
|
segmentSelect: [{ type: Output }]
|
|
85
99
|
};
|
|
86
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
100
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUlwRSxNQUFNLENBQU4sSUFBWSxvQkFJWDtBQUpELFdBQVksb0JBQW9CO0lBQzlCLHFDQUFhLENBQUE7SUFDYixtREFBMkIsQ0FBQTtJQUMzQiwyQ0FBbUIsQ0FBQTtBQUNyQixDQUFDLEVBSlcsb0JBQW9CLEtBQXBCLG9CQUFvQixRQUkvQjtBQVNELE1BQU0sT0FBTyx5QkFBeUI7SUFDcEMsWUFBb0IsbUJBQXdDO1FBQXhDLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFVbkQsU0FBSSxHQUF5QixvQkFBb0IsQ0FBQyxPQUFPLENBQUM7UUFXM0QsV0FBTSxHQUEwQixFQUFFLENBQUM7UUF5Qm5DLG1CQUFjLEdBQVcsQ0FBQyxDQUFDLENBQUM7UUE0QjFCLGtCQUFhLEdBQThCLElBQUksWUFBWSxFQUFFLENBQUM7SUExRVQsQ0FBQztJQUVoRSxtQkFBbUIsQ0FBQyxLQUFZO1FBQzlCLElBQUksS0FBSyxDQUFDLE1BQU0sWUFBWSxXQUFXLEVBQUU7WUFDdkMsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMscUJBQXFCLENBQUMsRUFBRTtnQkFDMUQsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7YUFDbEM7U0FDRjtJQUNILENBQUM7SUFJRCxJQUNJLGFBQWE7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RSxPQUFPLEVBQUU7O2FBQ3hCOzs7O1lBaEJRLG1CQUFtQjs7O21CQTRCekIsS0FBSzs0QkFFTCxXQUFXLFNBQUMsT0FBTztvQkFjbkIsS0FBSzs0QkF5QkwsS0FBSztvQkFZTCxLQUFLOzBCQUlMLFdBQVcsU0FBQyxVQUFVO21CQUd0QixLQUFLOzRCQUlMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgSWNvblJlZ2lzdHJ5U2VydmljZSB9IGZyb20gJy4uL2ljb24vaWNvbi1yZWdpc3RyeS5zZXJ2aWNlJztcblxuaW1wb3J0IHsgU2VnbWVudEl0ZW0sIFNlZ21lbnRJdGVtSW50ZXJuYWwgfSBmcm9tICcuL3NlZ21lbnQtaXRlbSc7XG5cbmV4cG9ydCBlbnVtIFNlZ21lbnRlZENvbnRyb2xNb2RlIHtcbiAgY2hpcCA9ICdjaGlwJyxcbiAgY29tcGFjdENoaXAgPSAnY29tcGFjdENoaXAnLFxuICBkZWZhdWx0ID0gJ2RlZmF1bHQnLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1zZWdtZW50ZWQtY29udHJvbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5zY3NzJ10sXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogbm8taG9zdC1tZXRhZGF0YS1wcm9wZXJ0eVxuICBob3N0OiB7IHJvbGU6ICdncm91cCcgfSxcbn0pXG5leHBvcnQgY2xhc3MgU2VnbWVudGVkQ29udHJvbENvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgaWNvblJlZ2lzdHJ5U2VydmljZTogSWNvblJlZ2lzdHJ5U2VydmljZSkge31cblxuICBwcmV2ZW50V3JhcHBlckNsaWNrKGV2ZW50OiBFdmVudCkge1xuICAgIGlmIChldmVudC50YXJnZXQgaW5zdGFuY2VvZiBIVE1MRWxlbWVudCkge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ3NlZ21lbnQtYnRuLXdyYXBwZXInKSkge1xuICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBASW5wdXQoKSBtb2RlOiBTZWdtZW50ZWRDb250cm9sTW9kZSA9IFNlZ21lbnRlZENvbnRyb2xNb2RlLmRlZmF1bHQ7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBfbW9kZUNzc0NsYXNzKCkge1xuICAgIHJldHVybiB7XG4gICAgICBbU2VnbWVudGVkQ29udHJvbE1vZGUuY2hpcF06ICdjaGlwLW1vZGUnLFxuICAgICAgW1NlZ21lbnRlZENvbnRyb2xNb2RlLmRlZmF1bHRdOiAnZGVmYXVsdC1tb2RlJyxcbiAgICAgIFtTZWdtZW50ZWRDb250cm9sTW9kZS5jb21wYWN0Q2hpcF06ICdjb21wYWN0IGNoaXAtbW9kZScsXG4gICAgfVt0aGlzLm1vZGVdO1xuICB9XG5cbiAgcHJpdmF0ZSBfaXRlbXM6IFNlZ21lbnRJdGVtSW50ZXJuYWxbXSA9IFtdO1xuICBnZXQgaXRlbXMoKTogU2VnbWVudEl0ZW1bXSB7XG4gICAgcmV0dXJuIHRoaXMuX2l0ZW1zO1xuICB9XG5cbiAgQElucHV0KCkgc2V0IGl0ZW1zKHZhbHVlOiBTZWdtZW50SXRlbVtdKSB7XG4gICAgdGhpcy5faXRlbXMgPSB2YWx1ZSB8fCBbXTtcbiAgICB0aGlzLl9pdGVtcy5mb3JFYWNoKChpdGVtKSA9PiB7XG4gICAgICBpZiAoaXRlbS5iYWRnZSA9PT0gdW5kZWZpbmVkKSByZXR1cm47XG4gICAgICAvLyBXZSBuZWVkIHRvIHZlcmlmeSB3aGV0aGVyIGJhZGdlcyBpY29uIGlzIGN1c3RvbSBvciBkZWZhdWx0LCBzbyB3ZSBjYW4gY2hlY2sgZm9yIGl0IGluIHRoZSB0ZW1wbGF0ZVxuICAgICAgaXRlbS5iYWRnZS5pc0N1c3RvbUljb24gPVxuICAgICAgICBpdGVtLmJhZGdlLmljb24gIT09IHVuZGVmaW5lZCAmJlxuICAgICAgICB0aGlzLmljb25SZWdpc3RyeVNlcnZpY2UuZ2V0SWNvbihpdGVtLmJhZGdlLmljb24pICE9PSB1bmRlZmluZWQ7XG4gICAgfSk7XG5cbiAgICBjb25zdCBjaGVja2VkSXRlbUluZGV4ID0gdGhpcy5pdGVtcy5maW5kSW5kZXgoKGl0ZW0pID0+IGl0ZW0uY2hlY2tlZCk7XG4gICAgaWYgKGNoZWNrZWRJdGVtSW5kZXggPiAtMSkge1xuICAgICAgY29uc29sZS53YXJuKFxuICAgICAgICAnU2VnbWVudEl0ZW0uY2hlY2tlZCBpcyBkZXByZWNhdGVkIC0gcGxlYXNlIHJlbW92ZSBmcm9tIHlvdXIgYGl0ZW1zYCBjb25maWd1cmF0aW9uLiBVc2UgYHNlbGVjdGVkSW5kZXhgIG9yIGB2YWx1ZWAgb24gYDxraXJieS1zZWdtZW50ZWQtY29udHJvbD5gIGluc3RlYWQgJ1xuICAgICAgKTtcbiAgICAgIHRoaXMuX3NlbGVjdGVkSW5kZXggPSBjaGVja2VkSXRlbUluZGV4O1xuICAgIH1cbiAgICB0aGlzLl92YWx1ZSA9IHRoaXMuaXRlbXNbdGhpcy5zZWxlY3RlZEluZGV4XTtcbiAgfVxuXG4gIHByaXZhdGUgX3NlbGVjdGVkSW5kZXg6IG51bWJlciA9IC0xO1xuICBnZXQgc2VsZWN0ZWRJbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLl9zZWxlY3RlZEluZGV4O1xuICB9XG5cbiAgQElucHV0KCkgc2V0IHNlbGVjdGVkSW5kZXgodmFsdWU6IG51bWJlcikge1xuICAgIGlmICh2YWx1ZSAhPT0gdGhpcy5fc2VsZWN0ZWRJbmRleCkge1xuICAgICAgdGhpcy5fc2VsZWN0ZWRJbmRleCA9IHZhbHVlO1xuICAgICAgdGhpcy5fdmFsdWUgPSB0aGlzLml0ZW1zW3RoaXMuc2VsZWN0ZWRJbmRleF07XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfdmFsdWU6IFNlZ21lbnRJdGVtO1xuICBnZXQgdmFsdWUoKTogU2VnbWVudEl0ZW0ge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCB2YWx1ZSh2YWx1ZTogU2VnbWVudEl0ZW0pIHtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSB0aGlzLml0ZW1zLmluZGV4T2YodmFsdWUpO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zbScpXG4gIGlzU21hbGxTaXplOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpIHNldCBzaXplKHNpemU6ICdzbScgfCAnbWQnKSB7XG4gICAgdGhpcy5pc1NtYWxsU2l6ZSA9IHNpemUgPT09ICdzbSc7XG4gIH1cblxuICBAT3V0cHV0KCkgc2VnbWVudFNlbGVjdDogRXZlbnRFbWl0dGVyPFNlZ21lbnRJdGVtPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBvblNlZ21lbnRTZWxlY3Qoc2VsZWN0ZWRJZDogc3RyaW5nKSB7XG4gICAgY29uc3Qgc2VsZWN0ZWRJdGVtSW5kZXggPSB0aGlzLml0ZW1zLmZpbmRJbmRleCgoaXRlbSkgPT4gc2VsZWN0ZWRJZCA9PT0gaXRlbS5pZCk7XG4gICAgaWYgKHNlbGVjdGVkSXRlbUluZGV4ICE9PSB0aGlzLnNlbGVjdGVkSW5kZXgpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleCA9IHNlbGVjdGVkSXRlbUluZGV4O1xuICAgICAgdGhpcy5zZWdtZW50U2VsZWN0LmVtaXQodGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG59XG4iXX0=
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"SegmentedControlMode":{"chip":"chip","compactChip":"compactChip","default":"default"},"SegmentedControlComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"SegmentedControlMode":{"chip":"chip","compactChip":"compactChip","default":"default"},"SegmentedControlComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"kirby-segmented-control","host":{"role":"group"},"template":"<ion-segment\n *ngIf=\"mode === 'default'\"\n [value]=\"value?.id\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventWrapperClick($event)\"\n>\n <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n <kirby-badge\n *ngIf=\"item.badge\"\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n <kirby-chip\n *ngFor=\"let item of items; let index = index\"\n [text]=\"item.text\"\n [isSelected]=\"index === selectedIndex\"\n (click)=\"onSegmentSelect(item.id)\"\n role=\"button\"\n ></kirby-chip>\n</ng-container>\n","styles":[":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../icon/icon-registry.service","name":"IconRegistryService","line":20,"character":43}]}],"preventWrapperClick":[{"__symbolic":"method"}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"_modeCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":32,"character":3},"arguments":["class"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"selectedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"isSmallSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":3},"arguments":["class.sm"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"segmentSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":3}}]}],"onSegmentSelect":[{"__symbolic":"method"}]}}}}]
|
|
@@ -7414,7 +7414,8 @@ var SegmentedControlMode;
|
|
|
7414
7414
|
SegmentedControlMode["default"] = "default";
|
|
7415
7415
|
})(SegmentedControlMode || (SegmentedControlMode = {}));
|
|
7416
7416
|
class SegmentedControlComponent {
|
|
7417
|
-
constructor() {
|
|
7417
|
+
constructor(iconRegistryService) {
|
|
7418
|
+
this.iconRegistryService = iconRegistryService;
|
|
7418
7419
|
this.mode = SegmentedControlMode.default;
|
|
7419
7420
|
this._items = [];
|
|
7420
7421
|
this._selectedIndex = -1;
|
|
@@ -7439,6 +7440,14 @@ class SegmentedControlComponent {
|
|
|
7439
7440
|
}
|
|
7440
7441
|
set items(value) {
|
|
7441
7442
|
this._items = value || [];
|
|
7443
|
+
this._items.forEach((item) => {
|
|
7444
|
+
if (item.badge === undefined)
|
|
7445
|
+
return;
|
|
7446
|
+
// We need to verify whether badges icon is custom or default, so we can check for it in the template
|
|
7447
|
+
item.badge.isCustomIcon =
|
|
7448
|
+
item.badge.icon !== undefined &&
|
|
7449
|
+
this.iconRegistryService.getIcon(item.badge.icon) !== undefined;
|
|
7450
|
+
});
|
|
7442
7451
|
const checkedItemIndex = this.items.findIndex((item) => item.checked);
|
|
7443
7452
|
if (checkedItemIndex > -1) {
|
|
7444
7453
|
console.warn('SegmentItem.checked is deprecated - please remove from your `items` configuration. Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead ');
|
|
@@ -7475,12 +7484,16 @@ class SegmentedControlComponent {
|
|
|
7475
7484
|
SegmentedControlComponent.decorators = [
|
|
7476
7485
|
{ type: Component, args: [{
|
|
7477
7486
|
selector: 'kirby-segmented-control',
|
|
7478
|
-
template: "<ion-segment\n *ngIf=\"mode === 'default'\"\n [value]=\"value?.id\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventWrapperClick($event)\"\n>\n <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n <kirby-badge\n *ngIf=\"item.badge\"\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <kirby-icon\n
|
|
7487
|
+
template: "<ion-segment\n *ngIf=\"mode === 'default'\"\n [value]=\"value?.id\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventWrapperClick($event)\"\n>\n <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n <kirby-badge\n *ngIf=\"item.badge\"\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n <kirby-chip\n *ngFor=\"let item of items; let index = index\"\n [text]=\"item.text\"\n [isSelected]=\"index === selectedIndex\"\n (click)=\"onSegmentSelect(item.id)\"\n role=\"button\"\n ></kirby-chip>\n</ng-container>\n",
|
|
7479
7488
|
// tslint:disable-next-line: no-host-metadata-property
|
|
7480
7489
|
host: { role: 'group' },
|
|
7481
7490
|
styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
|
|
7482
7491
|
},] }
|
|
7483
7492
|
];
|
|
7493
|
+
/** @nocollapse */
|
|
7494
|
+
SegmentedControlComponent.ctorParameters = () => [
|
|
7495
|
+
{ type: IconRegistryService }
|
|
7496
|
+
];
|
|
7484
7497
|
SegmentedControlComponent.propDecorators = {
|
|
7485
7498
|
mode: [{ type: Input }],
|
|
7486
7499
|
_modeCssClass: [{ type: HostBinding, args: ['class',] }],
|