@kirbydesign/designsystem 6.3.1 → 6.3.2-nopadding.0

package/fesm2015/kirbydesign-designsystem.mjs

@@ -4883,10 +4883,10 @@ class ItemComponent {
     }
 }
 /** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);font-size:14px;--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated: var( --kirby-item-background-activated, var(--kirby-white-shade) );--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;--background-hover: var(--kirby-item-background-hover, var(--kirby-background-color));--background-hover-opacity: 1}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);font-size:14px;--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated: var( --kirby-item-background-activated, var(--kirby-white-shade) );--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;--background-hover: var(--kirby-item-background-hover, var(--kirby-background-color));--background-hover-opacity: 1}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);font-size:14px;--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated: var( --kirby-item-background-activated, var(--kirby-white-shade) );--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;--background-hover: var(--kirby-item-background-hover, var(--kirby-background-color));--background-hover-opacity: 1}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
+            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);font-size:14px;--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated: var( --kirby-item-background-activated, var(--kirby-white-shade) );--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;--background-hover: var(--kirby-item-background-hover, var(--kirby-background-color));--background-hover-opacity: 1}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], selected: [{
@@ -8315,7 +8315,6 @@ class PageComponent {
         this.refresh = new EventEmitter();
         this.backButtonClick = new EventEmitter();
         this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
-        this.urls = [];
         this.ngOnDestroy$ = new Subject();
         this.navigationStart$ = this.router.events.pipe(takeUntil(this.ngOnDestroy$), filter((event) => event instanceof NavigationStart));
         this.navigationEnd$ = this.router.events.pipe(takeUntil(this.ngOnDestroy$), filter((event) => event instanceof NavigationEnd));
@@ -8343,15 +8342,19 @@ class PageComponent {
         }
     }
     ngAfterViewInit() {
+        // This instance has observed a page enter so register the correct url for this instance
+        this.url = this.router.url;
+        this.onEnter();
+        // Watch navigation events for page enter and leave
         this.navigationStart$.subscribe((event) => {
-            if (!this.urls.includes(event.url) &&
-                !this.modalNavigationService.isModalRoute(event.url) &&
-                !this.modalNavigationService.isModalRoute(this.router.url)) {
+            if (event.url !== this.url &&
+                !this.modalNavigationService.isModalRoute(this.url) &&
+                !this.modalNavigationService.isModalRoute(event.url)) {
                 this.onLeave();
             }
         });
         this.navigationEnd$.subscribe((event) => {
-            if (this.urls.includes(event.urlAfterRedirects)) {
+            if (event.urlAfterRedirects === this.url) {
                 this.onEnter();
             }
         });
@@ -8361,10 +8364,6 @@ class PageComponent {
         this.interceptBackButtonClicksSetup();
     }
     ngAfterContentChecked() {
-        if (!this.urls.includes(this.router.url)) {
-            this.urls.push(this.router.url);
-            this.onEnter();
-        }
         this.initializeTitle();
         this.initializeActions();
         this.initializeContent();
@@ -8384,20 +8383,22 @@ class PageComponent {
         });
     }
     onEnter() {
-        if (this.hasEntered)
+        if (this.isActive)
             return;
-        this.hasEntered = true;
+        this.isActive = true;
         this.enter.emit();
         if (this.pageTitle) {
             this.pageTitleIntersectionObserverRef.observe(this.pageTitle.nativeElement);
         }
     }
     onLeave() {
+        if (!this.isActive)
+            return;
+        this.isActive = false;
         this.leave.emit();
         if (this.pageTitle) {
             this.pageTitleIntersectionObserverRef.unobserve(this.pageTitle.nativeElement);
         }
-        this.hasEntered = false;
         if (this.tabBarBottomHidden && this.tabsComponent) {
             this.tabsComponent.tabBarBottomHidden = false;
         }
@@ -8899,6 +8900,7 @@ class SegmentedControlComponent {
         this.mode = SegmentedControlMode.default;
         this._items = [];
         this._selectedIndex = -1;
+        this.selectedIndexChange = new EventEmitter();
         this._disableChangeOnSwipe = false;
         this.segmentSelect = new EventEmitter();
     }
@@ -8939,10 +8941,11 @@ class SegmentedControlComponent {
     get selectedIndex() {
         return this._selectedIndex;
     }
-    set selectedIndex(value) {
-        if (value !== this._selectedIndex) {
-            this._selectedIndex = value;
+    set selectedIndex(index) {
+        if (index !== this._selectedIndex) {
+            this._selectedIndex = index;
             this._value = this.items[this.selectedIndex];
+            this.selectedIndexChange.emit(this.selectedIndex);
         }
     }
     get value() {
@@ -8964,12 +8967,14 @@ class SegmentedControlComponent {
         const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
         if (selectedItemIndex !== this.selectedIndex) {
             this.selectedIndex = selectedItemIndex;
-            this.segmentSelect.emit(this.value);
+            setTimeout(() => {
+                this.segmentSelect.emit(this.value);
+            });
         }
     }
 }
 /** @nocollapse */ SegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($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, .3), 0 0 5px 0 rgba(28, 28, 28, .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}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($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, .3), 0 0 5px 0 rgba(28, 28, 28, .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}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($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, .3), 0 0 5px 0 rgba(28, 28, 28, .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}\n"] }]
@@ -8982,6 +8987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }], selectedIndex: [{
                 type: Input
+            }], selectedIndexChange: [{
+                type: Output
             }], value: [{
                 type: Input
             }], isSmallSize: [{