@kirbydesign/designsystem 4.0.13 → 4.0.17
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 +24 -4
- 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/reorder-list/reorder-list.component.js +9 -3
- package/esm2015/lib/components/reorder-list/reorder-list.component.metadata.json +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/esm2015/lib/components/tabs/tab-button/tab-button.component.js +1 -1
- package/esm2015/lib/components/tabs/tab-button/tab-button.component.metadata.json +1 -1
- package/fesm2015/kirbydesign-designsystem.js +23 -4
- package/fesm2015/kirbydesign-designsystem.js.map +1 -1
- package/kirbydesign-designsystem.metadata.json +1 -1
- package/lib/components/reorder-list/reorder-list.component.d.ts +3 -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,8 +1,9 @@
|
|
|
1
|
-
import { Component, ContentChild, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChildren, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChildren, } from '@angular/core';
|
|
2
2
|
import { ListItemTemplateDirective } from '../list/list.directive';
|
|
3
3
|
import { ReorderEvent } from './reorder-event';
|
|
4
4
|
export class ReorderListComponent {
|
|
5
|
-
constructor() {
|
|
5
|
+
constructor(cdr) {
|
|
6
|
+
this.cdr = cdr;
|
|
6
7
|
this.itemReorder = new EventEmitter();
|
|
7
8
|
this.subItemReorder = new EventEmitter();
|
|
8
9
|
this.reorderActive = false;
|
|
@@ -21,6 +22,7 @@ export class ReorderListComponent {
|
|
|
21
22
|
this.reorderActive = mutation.target['className'].includes('reorder-list-active');
|
|
22
23
|
}
|
|
23
24
|
}
|
|
25
|
+
this.cdr.detectChanges();
|
|
24
26
|
};
|
|
25
27
|
this.observer = new MutationObserver(callback);
|
|
26
28
|
this.reorderGroupContainer.forEach((div) => {
|
|
@@ -52,6 +54,10 @@ ReorderListComponent.decorators = [
|
|
|
52
54
|
styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.outerGroup{border-bottom:20px solid transparent}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}"]
|
|
53
55
|
},] }
|
|
54
56
|
];
|
|
57
|
+
/** @nocollapse */
|
|
58
|
+
ReorderListComponent.ctorParameters = () => [
|
|
59
|
+
{ type: ChangeDetectorRef }
|
|
60
|
+
];
|
|
55
61
|
ReorderListComponent.propDecorators = {
|
|
56
62
|
items: [{ type: Input }],
|
|
57
63
|
subItemsName: [{ type: Input }],
|
|
@@ -61,4 +67,4 @@ ReorderListComponent.propDecorators = {
|
|
|
61
67
|
itemTemplate: [{ type: ContentChild, args: [ListItemTemplateDirective, { static: true, read: TemplateRef },] }],
|
|
62
68
|
reorderGroupContainer: [{ type: ViewChildren, args: ['reorderGroupContainer',] }]
|
|
63
69
|
};
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVvcmRlci1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9yZW9yZGVyLWxpc3QvcmVvcmRlci1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBRVosWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBQ04sU0FBUyxFQUNULFdBQVcsRUFDWCxZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFbkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBTy9DLE1BQU0sT0FBTyxvQkFBb0I7SUFnQi9CLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBWGhDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDL0MsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBZ0IsQ0FBQztRQVE1RCxrQkFBYSxHQUFZLEtBQUssQ0FBQztJQUVjLENBQUM7SUFFOUMsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDdkMsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUMxQixDQUFDLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVPLGdCQUFnQjtRQUN0QixNQUFNLFFBQVEsR0FBRyxDQUFDLGFBQWtCLEVBQUUsRUFBRTtZQUN0QyxLQUFLLElBQUksUUFBUSxJQUFJLGFBQWEsRUFBRTtnQkFDbEMsSUFBSSxRQUFRLENBQUMsUUFBUSxLQUFLLFFBQVEsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLEVBQUU7b0JBQ3RELElBQUksQ0FBQyxhQUFhLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxRQUFRLENBQUMscUJBQXFCLENBQUMsQ0FBQztpQkFDbkY7YUFDRjtZQUNELElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0IsQ0FBQyxDQUFDO1FBQ0YsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRS9DLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsQ0FBQyxHQUFlLEVBQUUsRUFBRTtZQUNyRCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFO2dCQUN2QyxVQUFVLEVBQUUsSUFBSTtnQkFDaEIsZUFBZSxFQUFFLENBQUMsT0FBTyxDQUFDO2dCQUMxQixpQkFBaUIsRUFBRSxJQUFJO2dCQUN2QixTQUFTLEVBQUUsS0FBSztnQkFDaEIsT0FBTyxFQUFFLElBQUk7YUFDZCxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxTQUFTLENBQUMsRUFBZTtRQUN2QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLFlBQVksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFRCxZQUFZLENBQUMsRUFBZSxFQUFFLFVBQWU7UUFDM0MsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxZQUFZLENBQUMsRUFBRSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELFdBQVc7UUFDVCx1QkFBdUI7UUFDdkIsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQzVDLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDOzs7WUFqRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLHVzQ0FBNEM7O2FBRTdDOzs7O1lBdEJDLGlCQUFpQjs7O29CQXdCaEIsS0FBSzsyQkFDTCxLQUFLO2lDQUNMLEtBQUs7MEJBRUwsTUFBTTs2QkFDTixNQUFNOzJCQUVOLFlBQVksU0FBQyx5QkFBeUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtvQ0FFM0UsWUFBWSxTQUFDLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NoaWxkcmVuLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTGlzdEl0ZW1UZW1wbGF0ZURpcmVjdGl2ZSB9IGZyb20gJy4uL2xpc3QvbGlzdC5kaXJlY3RpdmUnO1xuXG5pbXBvcnQgeyBSZW9yZGVyRXZlbnQgfSBmcm9tICcuL3Jlb3JkZXItZXZlbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1yZW9yZGVyLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmVvcmRlci1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcmVvcmRlci1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFJlb3JkZXJMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBpdGVtczogYW55W107XG4gIEBJbnB1dCgpIHN1Ykl0ZW1zTmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBnZXRJdGVtVGV4dERlZmF1bHQ6IChpdGVtOiBhbnkpID0+IHN0cmluZztcblxuICBAT3V0cHV0KCkgaXRlbVJlb3JkZXIgPSBuZXcgRXZlbnRFbWl0dGVyPFJlb3JkZXJFdmVudD4oKTtcbiAgQE91dHB1dCgpIHN1Ykl0ZW1SZW9yZGVyID0gbmV3IEV2ZW50RW1pdHRlcjxSZW9yZGVyRXZlbnQ+KCk7XG5cbiAgQENvbnRlbnRDaGlsZChMaXN0SXRlbVRlbXBsYXRlRGlyZWN0aXZlLCB7IHN0YXRpYzogdHJ1ZSwgcmVhZDogVGVtcGxhdGVSZWYgfSlcbiAgaXRlbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBAVmlld0NoaWxkcmVuKCdyZW9yZGVyR3JvdXBDb250YWluZXInKVxuICByZW9yZGVyR3JvdXBDb250YWluZXI6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcblxuICBwcml2YXRlIG9ic2VydmVyOiBNdXRhdGlvbk9ic2VydmVyO1xuICByZW9yZGVyQWN0aXZlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLml0ZW1zICYmIHRoaXMuaXRlbXMubGVuZ3RoID4gMCkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMuc2V0dXBEb21MaXN0ZW5lcigpO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzZXR1cERvbUxpc3RlbmVyKCkge1xuICAgIGNvbnN0IGNhbGxiYWNrID0gKG11dGF0aW9uc0xpc3Q6IGFueSkgPT4ge1xuICAgICAgZm9yIChsZXQgbXV0YXRpb24gb2YgbXV0YXRpb25zTGlzdCkge1xuICAgICAgICBpZiAobXV0YXRpb24ub2xkVmFsdWUgIT09IG11dGF0aW9uLnRhcmdldFsnY2xhc3NOYW1lJ10pIHtcbiAgICAgICAgICB0aGlzLnJlb3JkZXJBY3RpdmUgPSBtdXRhdGlvbi50YXJnZXRbJ2NsYXNzTmFtZSddLmluY2x1ZGVzKCdyZW9yZGVyLWxpc3QtYWN0aXZlJyk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICB9O1xuICAgIHRoaXMub2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihjYWxsYmFjayk7XG5cbiAgICB0aGlzLnJlb3JkZXJHcm91cENvbnRhaW5lci5mb3JFYWNoKChkaXY6IEVsZW1lbnRSZWYpID0+IHtcbiAgICAgIHRoaXMub2JzZXJ2ZXIub2JzZXJ2ZShkaXYubmF0aXZlRWxlbWVudCwge1xuICAgICAgICBhdHRyaWJ1dGVzOiB0cnVlLFxuICAgICAgICBhdHRyaWJ1dGVGaWx0ZXI6IFsnY2xhc3MnXSxcbiAgICAgICAgYXR0cmlidXRlT2xkVmFsdWU6IHRydWUsXG4gICAgICAgIGNoaWxkTGlzdDogZmFsc2UsXG4gICAgICAgIHN1YnRyZWU6IHRydWUsXG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIGRvUmVvcmRlcihldjogQ3VzdG9tRXZlbnQpIHtcbiAgICB0aGlzLml0ZW1SZW9yZGVyLmVtaXQobmV3IFJlb3JkZXJFdmVudChldikpO1xuICB9XG5cbiAgZG9TdWJSZW9yZGVyKGV2OiBDdXN0b21FdmVudCwgcGFyZW50SXRlbTogYW55KSB7XG4gICAgdGhpcy5zdWJJdGVtUmVvcmRlci5lbWl0KG5ldyBSZW9yZGVyRXZlbnQoZXYsIHBhcmVudEl0ZW0pKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIC8vY2xlYW4gdXAgdGhlIG9ic2VydmVyXG4gICAgdGhpcy5vYnNlcnZlciAmJiB0aGlzLm9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgICBkZWxldGUgdGhpcy5vYnNlcnZlcjtcbiAgfVxufVxuIl19
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"ReorderListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"ReorderListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"kirby-reorder-list","template":"<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outerGroup\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n","styles":["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.outerGroup{border-bottom:20px solid transparent}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}"]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"subItemsName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"getItemTextDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"itemReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"subItemReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":32,"character":3},"arguments":[{"__symbolic":"reference","module":"../list/list.directive","name":"ListItemTemplateDirective","line":32,"character":16},{"static":true,"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":32,"character":65}}]}]}],"reorderGroupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":34,"character":3},"arguments":["reorderGroupContainer"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":40,"character":27}]}],"ngOnChanges":[{"__symbolic":"method"}],"setupDomListener":[{"__symbolic":"method"}],"doReorder":[{"__symbolic":"method"}],"doSubReorder":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
|
|
@@ -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)
|
|
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUlwRSxNQUFNLENBQU4sSUFBWSxvQkFJWDtBQUpELFdBQVksb0JBQW9CO0lBQzlCLHFDQUFhLENBQUE7SUFDYixtREFBMkIsQ0FBQTtJQUMzQiwyQ0FBbUIsQ0FBQTtBQUNyQixDQUFDLEVBSlcsb0JBQW9CLEtBQXBCLG9CQUFvQixRQUkvQjtBQVNELE1BQU0sT0FBTyx5QkFBeUI7SUFDcEMsWUFBb0IsbUJBQXdDO1FBQXhDLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFVbkQsU0FBSSxHQUF5QixvQkFBb0IsQ0FBQyxPQUFPLENBQUM7UUFXM0QsV0FBTSxHQUEwQixFQUFFLENBQUM7UUF5Qm5DLG1CQUFjLEdBQVcsQ0FBQyxDQUFDLENBQUM7UUE0QjFCLGtCQUFhLEdBQThCLElBQUksWUFBWSxFQUFFLENBQUM7SUExRVQsQ0FBQztJQUVoRSxtQkFBbUIsQ0FBQyxLQUFZO1FBQzlCLElBQUksS0FBSyxDQUFDLE1BQU0sWUFBWSxXQUFXLEVBQUU7WUFDdkMsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMscUJBQXFCLENBQUMsRUFBRTtnQkFDMUQsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7YUFDbEM7U0FDRjtJQUNILENBQUM7SUFJRCxJQUNJLGFBQWE7UUFDZixPQUFPO1lBQ0wsQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxXQUFXO1lBQ3hDLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLEVBQUUsY0FBYztZQUM5QyxDQUFDLG9CQUFvQixDQUFDLFdBQVcsQ0FBQyxFQUFFLG1CQUFtQjtTQUN4RCxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNmLENBQUM7SUFHRCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUVELElBQWEsS0FBSyxDQUFDLEtBQW9CO1FBQ3JDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxJQUFJLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQzNCLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSztnQkFBRSxPQUFPO1lBQ3hCLHFHQUFxRztZQUNyRyxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVk7Z0JBQ3JCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLFNBQVM7b0JBQzdCLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxTQUFTLENBQUM7UUFDcEUsQ0FBQyxDQUFDLENBQUM7UUFFSCxNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDdEUsSUFBSSxnQkFBZ0IsR0FBRyxDQUFDLENBQUMsRUFBRTtZQUN6QixPQUFPLENBQUMsSUFBSSxDQUNWLDJKQUEySixDQUM1SixDQUFDO1lBQ0YsSUFBSSxDQUFDLGNBQWMsR0FBRyxnQkFBZ0IsQ0FBQztTQUN4QztRQUNELElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUdELElBQUksYUFBYTtRQUNmLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBYSxhQUFhLENBQUMsS0FBYTtRQUN0QyxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ2pDLElBQUksQ0FBQyxjQUFjLEdBQUcsS0FBSyxDQUFDO1lBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDOUM7SUFDSCxDQUFDO0lBR0QsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFhLEtBQUssQ0FBQyxLQUFrQjtRQUNuQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFLRCxJQUFhLElBQUksQ0FBQyxJQUFpQjtRQUNqQyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksS0FBSyxJQUFJLENBQUM7SUFDbkMsQ0FBQztJQUlELGVBQWUsQ0FBQyxVQUFrQjtRQUNoQyxNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxVQUFVLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2pGLElBQUksaUJBQWlCLEtBQUssSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM1QyxJQUFJLENBQUMsYUFBYSxHQUFHLGlCQUFpQixDQUFDO1lBQ3ZDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNyQztJQUNILENBQUM7OztZQTFGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHlCQUF5QjtnQkFDbkMsOHlDQUFpRDtnQkFFakQsc0RBQXNEO2dCQUN0RCxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFOzthQUN4Qjs7OztZQWhCUSxtQkFBbUI7OzttQkE0QnpCLEtBQUs7NEJBRUwsV0FBVyxTQUFDLE9BQU87b0JBY25CLEtBQUs7NEJBeUJMLEtBQUs7b0JBWUwsS0FBSzswQkFJTCxXQUFXLFNBQUMsVUFBVTttQkFHdEIsS0FBSzs0QkFJTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEljb25SZWdpc3RyeVNlcnZpY2UgfSBmcm9tICcuLi9pY29uL2ljb24tcmVnaXN0cnkuc2VydmljZSc7XG5cbmltcG9ydCB7IFNlZ21lbnRJdGVtLCBTZWdtZW50SXRlbUludGVybmFsIH0gZnJvbSAnLi9zZWdtZW50LWl0ZW0nO1xuXG5leHBvcnQgZW51bSBTZWdtZW50ZWRDb250cm9sTW9kZSB7XG4gIGNoaXAgPSAnY2hpcCcsXG4gIGNvbXBhY3RDaGlwID0gJ2NvbXBhY3RDaGlwJyxcbiAgZGVmYXVsdCA9ICdkZWZhdWx0Jyxcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnktc2VnbWVudGVkLWNvbnRyb2wnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuc2NzcyddLFxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IG5vLWhvc3QtbWV0YWRhdGEtcHJvcGVydHlcbiAgaG9zdDogeyByb2xlOiAnZ3JvdXAnIH0sXG59KVxuZXhwb3J0IGNsYXNzIFNlZ21lbnRlZENvbnRyb2xDb21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGljb25SZWdpc3RyeVNlcnZpY2U6IEljb25SZWdpc3RyeVNlcnZpY2UpIHt9XG5cbiAgcHJldmVudFdyYXBwZXJDbGljayhldmVudDogRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQudGFyZ2V0IGluc3RhbmNlb2YgSFRNTEVsZW1lbnQpIHtcbiAgICAgIGlmIChldmVudC50YXJnZXQuY2xhc3NMaXN0LmNvbnRhaW5zKCdzZWdtZW50LWJ0bi13cmFwcGVyJykpIHtcbiAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgQElucHV0KCkgbW9kZTogU2VnbWVudGVkQ29udHJvbE1vZGUgPSBTZWdtZW50ZWRDb250cm9sTW9kZS5kZWZhdWx0O1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgX21vZGVDc3NDbGFzcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgW1NlZ21lbnRlZENvbnRyb2xNb2RlLmNoaXBdOiAnY2hpcC1tb2RlJyxcbiAgICAgIFtTZWdtZW50ZWRDb250cm9sTW9kZS5kZWZhdWx0XTogJ2RlZmF1bHQtbW9kZScsXG4gICAgICBbU2VnbWVudGVkQ29udHJvbE1vZGUuY29tcGFjdENoaXBdOiAnY29tcGFjdCBjaGlwLW1vZGUnLFxuICAgIH1bdGhpcy5tb2RlXTtcbiAgfVxuXG4gIHByaXZhdGUgX2l0ZW1zOiBTZWdtZW50SXRlbUludGVybmFsW10gPSBbXTtcbiAgZ2V0IGl0ZW1zKCk6IFNlZ21lbnRJdGVtW10ge1xuICAgIHJldHVybiB0aGlzLl9pdGVtcztcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCBpdGVtcyh2YWx1ZTogU2VnbWVudEl0ZW1bXSkge1xuICAgIHRoaXMuX2l0ZW1zID0gdmFsdWUgfHwgW107XG4gICAgdGhpcy5faXRlbXMuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgaWYgKCFpdGVtLmJhZGdlKSByZXR1cm47XG4gICAgICAvLyBXZSBuZWVkIHRvIHZlcmlmeSB3aGV0aGVyIGJhZGdlcyBpY29uIGlzIGN1c3RvbSBvciBkZWZhdWx0LCBzbyB3ZSBjYW4gY2hlY2sgZm9yIGl0IGluIHRoZSB0ZW1wbGF0ZVxuICAgICAgaXRlbS5iYWRnZS5pc0N1c3RvbUljb24gPVxuICAgICAgICBpdGVtLmJhZGdlLmljb24gIT09IHVuZGVmaW5lZCAmJlxuICAgICAgICB0aGlzLmljb25SZWdpc3RyeVNlcnZpY2UuZ2V0SWNvbihpdGVtLmJhZGdlLmljb24pICE9PSB1bmRlZmluZWQ7XG4gICAgfSk7XG5cbiAgICBjb25zdCBjaGVja2VkSXRlbUluZGV4ID0gdGhpcy5pdGVtcy5maW5kSW5kZXgoKGl0ZW0pID0+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"}]}}}}]
|
|
@@ -28,7 +28,7 @@ TabButtonComponent.decorators = [
|
|
|
28
28
|
{ type: Component, args: [{
|
|
29
29
|
selector: 'kirby-tab-button',
|
|
30
30
|
template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n",
|
|
31
|
-
styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-
|
|
31
|
+
styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
|
|
32
32
|
},] }
|
|
33
33
|
];
|
|
34
34
|
/** @nocollapse */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TabButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"kirby-tab-button","template":"<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n","styles":["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TabButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"kirby-tab-button","template":"<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n","styles":["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]}]}],"members":{"routerLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"icons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":23,"character":3},"arguments":[{"__symbolic":"reference","module":"../../icon/icon.component","name":"IconComponent","line":23,"character":19}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":25,"character":64}]}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"removeWrapper":[{"__symbolic":"method"}]}}}}]
|
|
@@ -6728,7 +6728,8 @@ class ReorderEvent {
|
|
|
6728
6728
|
}
|
|
6729
6729
|
|
|
6730
6730
|
class ReorderListComponent {
|
|
6731
|
-
constructor() {
|
|
6731
|
+
constructor(cdr) {
|
|
6732
|
+
this.cdr = cdr;
|
|
6732
6733
|
this.itemReorder = new EventEmitter();
|
|
6733
6734
|
this.subItemReorder = new EventEmitter();
|
|
6734
6735
|
this.reorderActive = false;
|
|
@@ -6747,6 +6748,7 @@ class ReorderListComponent {
|
|
|
6747
6748
|
this.reorderActive = mutation.target['className'].includes('reorder-list-active');
|
|
6748
6749
|
}
|
|
6749
6750
|
}
|
|
6751
|
+
this.cdr.detectChanges();
|
|
6750
6752
|
};
|
|
6751
6753
|
this.observer = new MutationObserver(callback);
|
|
6752
6754
|
this.reorderGroupContainer.forEach((div) => {
|
|
@@ -6778,6 +6780,10 @@ ReorderListComponent.decorators = [
|
|
|
6778
6780
|
styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.outerGroup{border-bottom:20px solid transparent}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}"]
|
|
6779
6781
|
},] }
|
|
6780
6782
|
];
|
|
6783
|
+
/** @nocollapse */
|
|
6784
|
+
ReorderListComponent.ctorParameters = () => [
|
|
6785
|
+
{ type: ChangeDetectorRef }
|
|
6786
|
+
];
|
|
6781
6787
|
ReorderListComponent.propDecorators = {
|
|
6782
6788
|
items: [{ type: Input }],
|
|
6783
6789
|
subItemsName: [{ type: Input }],
|
|
@@ -7414,7 +7420,8 @@ var SegmentedControlMode;
|
|
|
7414
7420
|
SegmentedControlMode["default"] = "default";
|
|
7415
7421
|
})(SegmentedControlMode || (SegmentedControlMode = {}));
|
|
7416
7422
|
class SegmentedControlComponent {
|
|
7417
|
-
constructor() {
|
|
7423
|
+
constructor(iconRegistryService) {
|
|
7424
|
+
this.iconRegistryService = iconRegistryService;
|
|
7418
7425
|
this.mode = SegmentedControlMode.default;
|
|
7419
7426
|
this._items = [];
|
|
7420
7427
|
this._selectedIndex = -1;
|
|
@@ -7439,6 +7446,14 @@ class SegmentedControlComponent {
|
|
|
7439
7446
|
}
|
|
7440
7447
|
set items(value) {
|
|
7441
7448
|
this._items = value || [];
|
|
7449
|
+
this._items.forEach((item) => {
|
|
7450
|
+
if (!item.badge)
|
|
7451
|
+
return;
|
|
7452
|
+
// We need to verify whether badges icon is custom or default, so we can check for it in the template
|
|
7453
|
+
item.badge.isCustomIcon =
|
|
7454
|
+
item.badge.icon !== undefined &&
|
|
7455
|
+
this.iconRegistryService.getIcon(item.badge.icon) !== undefined;
|
|
7456
|
+
});
|
|
7442
7457
|
const checkedItemIndex = this.items.findIndex((item) => item.checked);
|
|
7443
7458
|
if (checkedItemIndex > -1) {
|
|
7444
7459
|
console.warn('SegmentItem.checked is deprecated - please remove from your `items` configuration. Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead ');
|
|
@@ -7475,12 +7490,16 @@ class SegmentedControlComponent {
|
|
|
7475
7490
|
SegmentedControlComponent.decorators = [
|
|
7476
7491
|
{ type: Component, args: [{
|
|
7477
7492
|
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
|
|
7493
|
+
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
7494
|
// tslint:disable-next-line: no-host-metadata-property
|
|
7480
7495
|
host: { role: 'group' },
|
|
7481
7496
|
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
7497
|
},] }
|
|
7483
7498
|
];
|
|
7499
|
+
/** @nocollapse */
|
|
7500
|
+
SegmentedControlComponent.ctorParameters = () => [
|
|
7501
|
+
{ type: IconRegistryService }
|
|
7502
|
+
];
|
|
7484
7503
|
SegmentedControlComponent.propDecorators = {
|
|
7485
7504
|
mode: [{ type: Input }],
|
|
7486
7505
|
_modeCssClass: [{ type: HostBinding, args: ['class',] }],
|
|
@@ -7593,7 +7612,7 @@ TabButtonComponent.decorators = [
|
|
|
7593
7612
|
{ type: Component, args: [{
|
|
7594
7613
|
selector: 'kirby-tab-button',
|
|
7595
7614
|
template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n",
|
|
7596
|
-
styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-
|
|
7615
|
+
styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
|
|
7597
7616
|
},] }
|
|
7598
7617
|
];
|
|
7599
7618
|
/** @nocollapse */
|