@kirbydesign/designsystem 5.3.1 → 5.4.1

package/bundles/kirbydesign-designsystem.umd.js

@@ -6008,15 +6008,8 @@
             enumerable: false,
             configurable: true
         });
-        PopoverComponent.prototype._backdropClick = function () {
-            this.willHide.emit();
-            this.hide();
-        };
         PopoverComponent.prototype._onWindowResize = function () {
-            if (this.isShowing) {
-                this.willHide.emit();
-                this.hide();
-            }
+            this.hide();
         };
         PopoverComponent.prototype.ngAfterViewInit = function () {
             this.placePopoverAboveClosestModal();
@@ -6036,8 +6029,13 @@
             }
         };
         // document.removeEventListener needs the exact same event handler & options reference:
-        PopoverComponent.prototype.preventEvent = function (event) {
-            event.preventDefault();
+        PopoverComponent.preventEventOutsidePopover = function (event) {
+            if (event.target instanceof HTMLElement) {
+                var targetIsInPopover = !!event.target.closest('kirby-popover');
+                if (!targetIsInPopover) {
+                    event.preventDefault();
+                }
+            }
         };
         PopoverComponent.prototype.preventScroll = function () {
             this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');
@@ -6045,13 +6043,13 @@
                 this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
             }
             // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead
-            this.document.addEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+            this.document.addEventListener('touchmove', PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
         };
         PopoverComponent.prototype.releaseScroll = function () {
             if (this.isFirstToLockScroll) {
                 this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
             }
-            this.document.removeEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+            this.document.removeEventListener('touchmove', PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
         };
         PopoverComponent.prototype.show = function () {
             this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');
@@ -6063,7 +6061,10 @@
             this.isShowing = true;
         };
         PopoverComponent.prototype.hide = function () {
-            this.renderer.removeChild(this.document.body, this.elementRef.nativeElement);
+            if (!this.isShowing)
+                return;
+            this.willHide.emit();
+            this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.elementRef.nativeElement);
             this.releaseScroll();
             this.renderer.removeStyle(this.targetElement, 'z-index');
             this.renderer.removeStyle(this.targetElement, 'pointer-events');
@@ -6130,7 +6131,6 @@
         popout: [{ type: i0.Input }],
         target: [{ type: i0.Input }],
         willHide: [{ type: i0.Output }],
-        _backdropClick: [{ type: i0.HostListener, args: ['click',] }],
         _onWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }]
     };
 
@@ -6631,7 +6631,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:0;max-width:none}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height:352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);min-width:288px;max-width:calc(100vw - 32px)}@media (min-width:321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
+                    styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:0;max-width:none}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height:352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);min-width:288px;max-width:calc(100vw - 32px)}@media (min-width:321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
                 },] }
     ];
     /** @nocollapse */
@@ -9243,6 +9243,7 @@
             this.mode = exports.SegmentedControlMode.default;
             this._items = [];
             this._selectedIndex = -1;
+            this._disableChangeOnSwipe = false;
             this.segmentSelect = new i0.EventEmitter();
         }
         SegmentedControlComponent.prototype.preventWrapperClick = function (event) {
@@ -9319,6 +9320,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SegmentedControlComponent.prototype, "disableChangeOnSwipe", {
+            get: function () {
+                return this._disableChangeOnSwipe;
+            },
+            set: function (value) {
+                this._disableChangeOnSwipe = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         SegmentedControlComponent.prototype.onSegmentSelect = function (selectedId) {
             var selectedItemIndex = this.items.findIndex(function (item) { return selectedId === item.id; });
             if (selectedItemIndex !== this.selectedIndex) {
@@ -9331,7 +9342,7 @@
     SegmentedControlComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-segmented-control',
-                    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",
+                    template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\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",
                     // tslint:disable-next-line: no-host-metadata-property
                     host: { role: 'group' },
                     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}"]
@@ -9349,6 +9360,7 @@
         value: [{ type: i0.Input }],
         isSmallSize: [{ type: i0.HostBinding, args: ['class.sm',] }],
         size: [{ type: i0.Input }],
+        disableChangeOnSwipe: [{ type: i0.Input }],
         segmentSelect: [{ type: i0.Output }]
     };