@kirbydesign/designsystem 8.5.2 → 8.6.0-input-bug-fix.0

package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs

@@ -101,10 +101,10 @@ class TabNavigationComponent {
     }
 }
 /** @nocollapse */ TabNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 720px){:host{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){:host:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 720px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){:host:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 720px){:host{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){:host:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 720px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\n"] }]
+            args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){:host:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }]; }, propDecorators: { tabBar: [{
                 type: ViewChild,
                 args: ['tabBar']
@@ -155,3 +155,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { TabNavigationComponent, TabNavigationItemComponent, TabNavigationModule };
 //# sourceMappingURL=kirbydesign-designsystem-tab-navigation.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-tab-navigation.mjs.map

package/fesm2020/kirbydesign-designsystem-tabs.mjs

@@ -43,10 +43,10 @@ class TabsComponent {
     }
 }
 /** @nocollapse */ TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 721px){ion-tabs{--kirby-tab-bar-height: 70px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: i2.IonTabs, selector: "ion-tabs", outputs: ["ionTabsWillChange", "ionTabsDidChange"] }] });
+/** @nocollapse */ TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: i2.IonTabs, selector: "ion-tabs", outputs: ["ionTabsWillChange", "ionTabsDidChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-bar', template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 721px){ion-tabs{--kirby-tab-bar-height: 70px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"] }]
+            args: [{ selector: 'kirby-tab-bar', template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"] }]
         }], ctorParameters: function () { return [{ type: TabsService }]; }, propDecorators: { tabBarBottomHidden: [{
                 type: HostBinding,
                 args: ['class.tab-bar-bottom-hidden']
@@ -81,10 +81,10 @@ class TabButtonComponent {
     }
 }
 /** @nocollapse */ TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, 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  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}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}}\n"], dependencies: [{ kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, 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  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}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}}\n"], dependencies: [{ kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
-            args: [{ 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  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}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}}\n"] }]
+            args: [{ 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  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}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}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { routerLink: [{
                 type: Input
             }], click: [{
@@ -115,3 +115,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { TabButtonComponent, TabsComponent, TabsModule, TabsService, selectedTabClickEvent };
 //# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map

package/fesm2020/kirbydesign-designsystem-testing-base.mjs

@@ -3418,3 +3418,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyTestingBaseModule, MockAccordionDirective, MockAccordionItemComponent, MockActionGroupComponent, MockActionSheetComponent, MockAffixDirective, MockAlertComponent, MockAlertExperimentalComponent, MockAppComponent, MockAvatarComponent, MockBadgeComponent, MockBaseChartComponent, MockButtonComponent, MockCalendarComponent, MockCardAsButtonDirective, MockCardComponent, MockCardFooterComponent, MockCardHeaderComponent, MockChartComponent, MockCheckboxComponent, MockComponentLoaderDirective, MockDateInputDirective, MockDecimalMaskDirective, MockDividerComponent, MockDropdownComponent, MockEmptyStateComponent, MockFabSheetComponent, MockFitHeadingDirective, MockFlagComponent, MockFloatingDirective, MockFormFieldComponent, MockFormFieldMessageComponent, MockGridComponent, MockHeaderActionsDirective, MockHeaderComponent, MockHeaderCustomSectionDirective, MockIconComponent, MockInfiniteScrollDirective, MockInputComponent, MockInputCounterComponent, MockItemComponent, MockItemGroupComponent, MockItemSlidingComponent, MockKeyHandlerDirective, MockLabelComponent, MockListComponent, MockListExperimentalComponent, MockListFooterDirective, MockListHeaderComponent, MockListHeaderDirective, MockListItemColorDirective, MockListItemComponent, MockListItemTemplateDirective, MockListSectionHeaderComponent, MockListSectionHeaderDirective, MockLoadingOverlayComponent, MockMenuComponent, MockModalCompactWrapperComponent, MockModalFooterComponent, MockModalRouterLinkDirective, MockModalV2Component, MockModalV2FooterComponent, MockModalV2RoutingComponent, MockModalV2WrapperComponent, MockModalWrapperComponent, MockPageActionsComponent, MockPageActionsDirective, MockPageComponent, MockPageContentComponent, MockPageContentDirective, MockPageFooterComponent, MockPageLocalNavigationComponent, MockPageProgressComponent, MockPageStickyContentDirective, MockPageSubtitleDirective, MockPageTitleComponent, MockPageTitleDirective, MockPageToolbarTitleDirective, MockPopoverComponent, MockPortalDirective, MockProgressCircleComponent, MockProgressCircleRingComponent, MockRadioComponent, MockRadioGroupComponent, MockRangeComponent, MockReorderListComponent, MockRouterOutletComponent, MockSectionHeaderComponent, MockSegmentedControlComponent, MockSlideButtonComponent, MockSlideDirective, MockSlidesComponent, MockSpinnerComponent, MockStockChartComponent, MockTabButtonComponent, MockTabNavigationComponent, MockTabNavigationItemComponent, MockTableComponent, MockTableRowComponent, MockTabsComponent, MockTextareaComponent, MockThemeColorDirective, MockToggleButtonComponent, MockToggleComponent };
 //# sourceMappingURL=kirbydesign-designsystem-testing-base.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-testing-base.mjs.map

package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs

@@ -112,3 +112,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyTestingModule };
 //# sourceMappingURL=kirbydesign-designsystem-testing-jasmine.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-testing-jasmine.mjs.map

package/fesm2020/kirbydesign-designsystem-testing-jest.mjs

@@ -118,3 +118,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyTestingModule };
 //# sourceMappingURL=kirbydesign-designsystem-testing-jest.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-testing-jest.mjs.map

package/fesm2020/kirbydesign-designsystem-testing.mjs

@@ -233,3 +233,4 @@ function getErrorMessage(element, cssProperty, actualValue, expectedValue, expec
 
 export { ElementCssCustomMatchers, TestHelper };
 //# sourceMappingURL=kirbydesign-designsystem-testing.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-testing.mjs.map

package/fesm2020/kirbydesign-designsystem-toast.mjs

@@ -61,3 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ToastController, ToastHelper };
 //# sourceMappingURL=kirbydesign-designsystem-toast.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-toast.mjs.map

package/fesm2020/kirbydesign-designsystem-toggle-button.mjs

@@ -47,3 +47,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ToggleButtonComponent, ToggleButtonModule };
 //# sourceMappingURL=kirbydesign-designsystem-toggle-button.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-toggle-button.mjs.map

package/fesm2020/kirbydesign-designsystem-toggle.mjs

@@ -41,3 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ToggleComponent };
 //# sourceMappingURL=kirbydesign-designsystem-toggle.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-toggle.mjs.map

package/fesm2020/kirbydesign-designsystem-types.mjs

@@ -21,3 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { WindowRef };
 //# sourceMappingURL=kirbydesign-designsystem-types.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-types.mjs.map

package/fesm2020/kirbydesign-designsystem.mjs

@@ -764,3 +764,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyBadge as BadgeComponent, KeyHandlerDirective, KirbyBadgeModule, KirbyExperimentalModule, KirbyModule, ModalRouterLinkDirective, PageLocalNavigationComponent, SegmentedControlComponent, SegmentedControlMode };
 //# sourceMappingURL=kirbydesign-designsystem.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem.mjs.map

package/form-field/directives/date/date-input.directive.d.ts

@@ -6,7 +6,18 @@ export declare class DateInputDirective implements AfterViewInit {
     private renderer;
     private locale;
     onInput(): void;
+    prefillYear: boolean;
     private maskingElement;
+    /**
+     * `isDateInput` is used to avoid removing the type attribute on the input element and calling updateMask()
+     * when the directive is not used on a date input.
+     * This is needed for the standalone component 'InputComponent', which includes the directive
+     * using the `hostDirectives` component decorator prop. Angular ignores the selector of directives
+     * applied in the `hostDirectives` property which effectively applies the directive to all kirby-inputs, not only date inputs.
+     * This check prevents the directive from executing it's masking on non-date inputs.
+     * See: https://angular.io/guide/directive-composition-api
+     */
+    private isDateInput;
     constructor(elementRef: ElementRef, renderer: Renderer2, locale: string);
     ngAfterViewInit(): void;
     private initMask;
@@ -16,5 +27,5 @@ export declare class DateInputDirective implements AfterViewInit {
     private wrapElement;
     private updateMask;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DateInputDirective, "[kirby-input][type=\"date\"]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DateInputDirective, "[kirby-input][type=\"date\"]", never, { "prefillYear": "prefillYear"; }, {}, never, never, true, never>;
 }

package/form-field/input/input.component.d.ts

@@ -1,10 +1,14 @@
-import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "../directives/date/date-input.directive";
 export declare enum InputSize {
     medium = "md",
     large = "lg"
 }
-export declare class InputComponent implements OnChanges {
+export declare class InputComponent implements OnChanges, OnInit {
+    private elementRef;
+    constructor(elementRef: ElementRef<HTMLInputElement>);
+    ngOnInit(): void;
     private static typeToInputmodeMap;
     kirbyChange: EventEmitter<string>;
     set type(value: string);
@@ -23,5 +27,5 @@ export declare class InputComponent implements OnChanges {
     _onCutPaste(target: HTMLInputElement): void;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "input[kirby-input]", never, { "type": "type"; "size": "size"; "borderless": "borderless"; "hasError": "hasError"; "autocomplete": "autocomplete"; "autocorrect": "autocorrect"; "value": "value"; "maxlength": "maxlength"; "inputmode": "inputmode"; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "input[kirby-input]", never, { "type": "type"; "size": "size"; "borderless": "borderless"; "hasError": "hasError"; "autocomplete": "autocomplete"; "autocorrect": "autocorrect"; "value": "value"; "maxlength": "maxlength"; "inputmode": "inputmode"; }, {}, never, never, true, [{ directive: typeof i1.DateInputDirective; inputs: { "prefillYear": "prefillYear"; }; outputs: {}; }]>;
 }

package/icon/src/README.md

@@ -0,0 +1,16 @@
+# Add new icons
+
+To add new icons, you should use the [icomoon app](https://icomoon.io).
+
+## Generate font from svg's
+
+1. Upload selection.json to get existing icons and settings
+2. Upload new icons
+3. Download Font
+
+## Update kirby icons
+
+1. Replace src/kirby/icon/selection.json, with newly generated selection.json
+2. Replace src/fonts/kirby.ttf, with newly generated kirby.ttf
+3. Update kirby-custom-icon-settings.ts with new icons (old icons should not have changed)
+4. Add new icon svg's to src/assets/icons/kirby

package/modal/modal-wrapper/config/modal-config.d.ts

@@ -7,6 +7,7 @@ export interface ModalConfig {
     collapseTitle?: boolean;
     component: any;
     size?: ModalSize;
+    customHeight?: string;
     modalRoute?: ActivatedRoute;
     siblingModalRouteActivated$?: Observable<ActivatedRoute>;
     flavor?: ModalFlavor;

package/modal/modal-wrapper/modal-wrapper.component.d.ts

@@ -49,12 +49,15 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private _mutationObserver;
     private _intersectionObserver;
     private get intersectionObserver();
+    isContentScrolled: boolean;
+    private contentScrolled$;
     private destroy$;
     get _isDrawer(): boolean;
     willClose$: Observable<void>;
     private modalElementsMoverDelegate;
     constructor(changeDetector: ChangeDetectorRef, injector: Injector, elementRef: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, resizeObserverService: ResizeObserverService, componentFactoryResolver: ComponentFactoryResolver, windowRef: WindowRef, platform: PlatformService);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     private _currentFooter;
     private set currentFooter(value);
     private get currentFooter();
@@ -67,10 +70,10 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private patchScrollElementSize;
     private observeModalFullHeight;
     private getIonModalWrapperElement;
-    ngAfterViewInit(): void;
     private observeHeaderResize;
     private listenForIonModalDidPresent;
     private listenForIonModalWillDismiss;
+    private initializeContentScrollListening;
     scrollToTop(scrollDuration?: KirbyAnimation.Duration): void;
     scrollToBottom(scrollDuration?: KirbyAnimation.Duration): void;
     close(data?: any): Promise<void>;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "8.5.2",
+  "version": "8.6.0-input-bug-fix.0",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
     "@angular/cdk": "^15.0.3",
     "@fontsource/roboto": "4.2.1",
     "@ionic/angular": "6.2.1",
-    "@kirbydesign/core": "0.0.49",
+    "@kirbydesign/core": "0.0.50",
     "inputmask": "5.0.5",
     "tslib": "^2.3.0"
   },

package/page/page.component.d.ts

@@ -2,7 +2,7 @@ import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, Even
 import { Router } from '@angular/router';
 import { IonRouterOutlet, NavController } from '@ionic/angular';
 import { TabsComponent } from '@kirbydesign/designsystem/tabs';
-import { ModalElementComponent, ModalElementsAdvertiser, ModalNavigationService, ModalWrapperComponent } from '@kirbydesign/designsystem/modal';
+import { ModalElementComponent, ModalElementsAdvertiser, ModalNavigationService } from '@kirbydesign/designsystem/modal';
 import { FitHeadingConfig, ResizeObserverService } from '@kirbydesign/designsystem/shared';
 import { HeaderActionsDirective, HeaderComponent, HeaderTitleActionIconDirective } from '@kirbydesign/designsystem/header';
 import * as i0 from "@angular/core";
@@ -60,12 +60,10 @@ export declare class PageStickyContentDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<PageStickyContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PageStickyContentDirective, "[kirbyPageStickyContent]", never, {}, {}, never, never, false, never>;
 }
-export declare class PageProgressComponent extends ModalElementComponent implements OnInit {
-    private modalWrapper;
+export declare class PageProgressComponent extends ModalElementComponent {
     slot: string;
-    constructor(modalWrapper: ModalWrapperComponent, modalElementsAdvertiser: ModalElementsAdvertiser, elementRef: ElementRef<HTMLElement>);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PageProgressComponent, [{ optional: true; skipSelf: true; }, { optional: true; }, null]>;
+    constructor(modalElementsAdvertiser: ModalElementsAdvertiser, elementRef: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageProgressComponent, [{ optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PageProgressComponent, "kirby-page-progress", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class PageTitleComponent extends ModalElementComponent {

package/README.md

@@ -1,7 +0,0 @@
-# designsystem
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test designsystem` to execute the unit tests.