Merge pull request #2287 from kirbydesign/main

Release version 5.4

.github/CODEOWNERS

@@ -0,0 +1 @@
+*.scss  @jkaltoft

apps/cookbook/src/app/showcase/segmented-control-showcase/segmented-control-showcase.component.ts

@@ -52,5 +52,12 @@ export class SegmentedControlShowcaseComponent {
       defaultValue: 'undefined',
       type: ['number'],
     },
+    {
+      name: 'disableChangeOnSwipe',
+      description:
+        'Sets the `scrollable` attribute on ion-segment. Note that this will not make the segmented-control scrollable but it will prevent segmentChange from emitting on swipe, when set to true',
+      defaultValue: 'false',
+      type: ['boolean'],
+    },
   ];
 }

libs/core/src/scss/base/_functions.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
+@use 'sass:meta';
 @use 'sass:string';
 @use '../themes/colors';
 @use 'variables';
@@ -109,6 +110,17 @@
   @return $classes;
 }
 
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+/// Source: https://css-tricks.com/snippets/sass/strip-unit-function/
+@function strip-unit($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+  @return $number;
+}
+
 @mixin slotted($selectors...) {
   /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
   ::ng-deep > {

libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.spec.ts

@@ -261,17 +261,13 @@ describe('DropdownComponent (popover version)', () => {
     });
 
     describe('when configured with popout direction', () => {
-      /* TODO: This test has been flakey for some time. 
-         I've excluded it as it is currently worthless. 
-         For an example take a look at this test run: 
-         https://github.com/kirbydesign/designsystem/runs/5813726617
-     */
-      xit('should open card to the left when popout=left', fakeAsync(() => {
+      it('should open card to the left when popout=left', fakeAsync(() => {
         spectator.component.popout = HorizontalDirection.left;
         spectator.element.style.cssFloat = 'right';
 
         spectator.component.open();
         tick(openDelayInMs);
+        spectator.detectChanges();
 
         const card = spectator.query('kirby-card');
         const buttonRect = buttonElement.getBoundingClientRect();
@@ -310,12 +306,6 @@ describe('DropdownComponent (popover version)', () => {
           expect(spectator.component.isOpen).toBeTruthy();
           expect(spectator.element).toBeFocused();
         }));
-
-        it('should open dropdown within actual delay', async () => {
-          spectator.click('button');
-          await TestHelper.whenTrue(() => spectator.component.isOpen, openDelayInMs + 1);
-          expect(spectator.component.isOpen).toBeTruthy();
-        });
       });
 
       describe('and Space key is pressed', () => {

libs/designsystem/src/lib/components/dropdown/dropdown.component.scss

@@ -121,6 +121,14 @@ kirby-card {
   }
 }
 
+:host(.with-popover) {
+  &.is-open {
+    kirby-card {
+      display: block;
+    }
+  }
+}
+
 :host(.is-open) {
   & > button {
     box-shadow: utils.get-elevation(8);

libs/designsystem/src/lib/components/dropdown/dropdown.component.spec.ts

@@ -340,12 +340,6 @@ describe('DropdownComponent', () => {
           expect(spectator.component.isOpen).toBeTruthy();
           expect(spectator.element).toBeFocused();
         }));
-
-        it('should open dropdown within actual delay', async () => {
-          spectator.click('button');
-          await TestHelper.whenTrue(() => spectator.component.isOpen, openDelayInMs);
-          expect(spectator.component.isOpen).toBeTruthy();
-        });
       });
 
       describe('and Space key is pressed', () => {

libs/designsystem/src/lib/components/item-sliding/item-sliding.component.spec.ts

@@ -40,7 +40,7 @@ describe('ItemSlidingComponent', () => {
   });
 
   it('should create', () => {
-    expect(spectator.component).toBeTruthy;
+    expect(spectator.component).toBeTruthy();
   });
 
   it('should project slotted content', () => {

libs/designsystem/src/lib/components/modal/services/action-sheet.helper.spec.ts

@@ -58,11 +58,11 @@ describe('ActionSheetHelper', () => {
     });
 
     it('backdrop click should dismiss action-sheet', async () => {
-      let modalDidDismiss = false;
-      ionModal.onDidDismiss().then((_) => (modalDidDismiss = true));
+      const onDidDismiss = ionModal.onDidDismiss();
+
       backdrop.dispatchEvent(new MouseEvent('click'));
-      await new Promise<void>((resolve) => setTimeout(resolve, 15));
-      expect(modalDidDismiss).toBeTrue();
+
+      await expectAsync(onDidDismiss).toBeResolved();
     });
 
     it('action-sheet should have correct backdrop style when opened on top of a modal', async () => {

libs/designsystem/src/lib/components/popover/popover.component.ts

@@ -56,18 +56,9 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  @HostListener('click')
-  _backdropClick() {
-    this.willHide.emit();
-    this.hide();
-  }
-
   @HostListener('window:resize')
   _onWindowResize() {
-    if (this.isShowing) {
-      this.willHide.emit();
-      this.hide();
-    }
+    this.hide();
   }
 
   constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {
@@ -97,8 +88,13 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
   }
 
   // document.removeEventListener needs the exact same event handler & options reference:
-  private preventEvent(event: TouchEvent) {
-    event.preventDefault();
+  private static preventEventOutsidePopover(event: TouchEvent) {
+    if (event.target instanceof HTMLElement) {
+      const targetIsInPopover = !!event.target.closest('kirby-popover');
+      if (!targetIsInPopover) {
+        event.preventDefault();
+      }
+    }
   }
 
   private preventScroll() {
@@ -110,7 +106,7 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
     // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead
     this.document.addEventListener(
       'touchmove',
-      this.preventEvent,
+      PopoverComponent.preventEventOutsidePopover,
       this.preventScrollEventListenerOptions
     );
   }
@@ -122,7 +118,7 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
 
     this.document.removeEventListener(
       'touchmove',
-      this.preventEvent,
+      PopoverComponent.preventEventOutsidePopover,
       this.preventScrollEventListenerOptions
     );
   }
@@ -141,7 +137,13 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
   }
 
   hide() {
-    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');

libs/designsystem/src/lib/components/segmented-control/segmented-control.component.html

@@ -1,6 +1,7 @@
 <ion-segment
   *ngIf="mode === 'default'"
   [value]="value?.id"
+  [scrollable]="disableChangeOnSwipe"
   (ionChange)="onSegmentSelect($event.detail.value)"
   (click)="preventWrapperClick($event)"
 >

libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts

@@ -92,6 +92,15 @@ export class SegmentedControlComponent {
     this.isSmallSize = size === 'sm';
   }
 
+  private _disableChangeOnSwipe: boolean = false;
+  get disableChangeOnSwipe(): boolean {
+    return this._disableChangeOnSwipe;
+  }
+
+  @Input() set disableChangeOnSwipe(value: boolean) {
+    this._disableChangeOnSwipe = value;
+  }
+
   @Output() segmentSelect: EventEmitter<SegmentItem> = new EventEmitter();
 
   onSegmentSelect(selectedId: string) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "designsystem",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "description": "Kirby Design Angular Components. This library provides Angular wrappers for the @kirbydesign/core package, for smoother integration into Angular projects.",
   "engines": {
     "node": "^14.16"