@kirbydesign/designsystem 4.0.1 → 4.0.2

package/lib/components/dropdown/dropdown.component.d.ts

@@ -1,18 +1,12 @@
 import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-export declare enum OpenState {
-    closed = 0,
-    opening = 1,
-    open = 2
-}
-export declare enum HorizontalDirection {
-    right = "right",
-    left = "left"
-}
+import { HorizontalDirection, PopoverComponent } from '../popover/popover.component';
+import { KeyboardHandlerService } from './keyboard-handler.service';
 export declare class DropdownComponent implements AfterContentChecked, AfterViewInit, OnDestroy, ControlValueAccessor {
     private renderer;
     private elementRef;
     private changeDetectorRef;
+    private keyboardHandlerService;
     static readonly OPEN_DELAY_IN_MS = 100;
     private state;
     private hasConfiguredSlottedItems;
@@ -36,6 +30,7 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     hasError: boolean;
     size: 'sm' | 'md';
     tabindex: number;
+    usePopover: boolean;
     get _tabindex(): number;
     get _noBlurOnScroll(): boolean;
     /**
@@ -54,16 +49,19 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     itemTemplate: TemplateRef<any>;
     slottedItems: QueryList<ElementRef<HTMLElement>>;
     cardElement: ElementRef<HTMLElement>;
+    popover?: PopoverComponent;
+    buttonElement: ElementRef<HTMLElement>;
     kirbyItemsDefault: QueryList<ElementRef<HTMLElement>>;
     kirbyItemsSlotted: QueryList<ElementRef<HTMLElement>>;
     private itemClickUnlisten;
     private intersectionObserverRef;
     private showDropdownTimeoutId;
-    constructor(renderer: Renderer2, elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef);
-    onToggle(event: Event): void;
+    constructor(renderer: Renderer2, elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, keyboardHandlerService: KeyboardHandlerService);
+    onToggle(event: MouseEvent): void;
     toggle(): void;
     onButtonMouseEvent(event: Event): void;
     ngAfterContentChecked(): void;
+    private setPopoverCardStyle;
     ngAfterViewInit(): void;
     private initializeAlignment;
     private setHorizontalDirection;
@@ -111,10 +109,11 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     _onTab(event: KeyboardEvent): void;
     _onMouseDown(event: MouseEvent): void;
     _onFocus(): void;
-    _onBlur(): void;
+    _onPopoverWillHide(): void;
+    _onBlur(event?: FocusEvent): void;
     _onSpace(event: KeyboardEvent): void;
     _onEnter(event: KeyboardEvent): void;
-    _onArrowKeys(event: KeyboardEvent): void;
-    _onHomeEndKeys(event: KeyboardEvent): void;
+    _onArrowKeys(event: KeyboardEvent): boolean;
+    _onHomeEndKeys(event: KeyboardEvent): boolean;
     ngOnDestroy(): void;
 }

package/lib/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,9 @@
+export declare enum OpenState {
+    closed = 0,
+    opening = 1,
+    open = 2
+}
+export declare enum VerticalDirection {
+    up = 0,
+    down = 1
+}

package/lib/components/dropdown/keyboard-handler.service.d.ts

@@ -0,0 +1,3 @@
+export declare class KeyboardHandlerService {
+    handle(event: KeyboardEvent, items: any[] | string[], selectedIndex: number): number;
+}

package/lib/components/index.d.ts

@@ -10,7 +10,7 @@ export * from './calendar';
 export { CheckboxComponent } from './checkbox/checkbox.component';
 export { ChipComponent } from './chip/chip.component';
 export { DividerComponent } from './divider/divider.component';
-export { DropdownComponent, HorizontalDirection } from './dropdown/dropdown.component';
+export { DropdownComponent } from './dropdown/dropdown.component';
 export { EmptyStateComponent } from './empty-state/empty-state.component';
 export * from './form-field';
 export { FabSheetComponent } from './fab-sheet/fab-sheet.component';
@@ -23,6 +23,7 @@ export * from './list';
 export * from './reorder-list';
 export * from './modal';
 export * from './page';
+export { HorizontalDirection, PopoverComponent } from './popover/popover.component';
 export * from './router-outlet';
 export * from './shared';
 export { SegmentedControlComponent, SegmentedControlMode } from './segmented-control/segmented-control.component';

package/lib/components/popover/popover.component.d.ts

@@ -0,0 +1,34 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+export declare enum HorizontalDirection {
+    right = "right",
+    left = "left"
+}
+export declare class PopoverComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    private readonly preventScrollEventListenerOptions;
+    private readonly POPOVER_BODY_PADDING;
+    private isShowing;
+    private isFirstToLockScroll;
+    private zIndex;
+    private document;
+    wrapperElement: ElementRef<HTMLDivElement>;
+    popout: HorizontalDirection;
+    target: HTMLElement | ElementRef<HTMLElement>;
+    willHide: EventEmitter<void>;
+    private get targetElement();
+    _backdropClick(): void;
+    _onWindowResize(): void;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private placePopoverAboveClosestModal;
+    private preventEvent;
+    private preventScroll;
+    private releaseScroll;
+    show(): void;
+    hide(): void;
+    private positionWrapper;
+    private positionHorizontally;
+    private positionVertically;
+}

package/lib/helpers/design-token-helper.d.ts

@@ -29,6 +29,7 @@ export declare class DesignTokenHelper {
     static fatFingerSize(): string;
     static getElevation(z: keyof typeof styles.elevations): string;
     static itemHeight(key: keyof typeof styles.itemHeights): string;
+    static zLayer(key: keyof typeof styles.zLayers): string;
 }
 export declare type ThemeColorExtended = ThemeColor | 'black' | 'semi-light' | 'semi-dark' | 'background-color';
 export declare type ThemeColorVariant = 'tint' | 'shade' | 'contrast';

package/lib/helpers/design-token-helper.styles.d.ts

@@ -48,6 +48,7 @@ export declare const styles: {
         default: string;
         segmentBadge: string;
         dropdown: string;
+        popover: string;
         modalOverlay: string;
         modal: string;
         loadingOverlay: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-plugin-annotation": "1.0.2",

package/scss/base/_variables.scss

@@ -71,6 +71,7 @@ $z-layers: (
   default: 1,
   segmentBadge: 2,
   dropdown: 800,
+  popover: 850,
   modal-overlay: 900,
   modal: 901,
   loading-overlay: 1001,

package/testing-base/kirbydesign-designsystem-testing-base.d.ts

@@ -37,20 +37,21 @@ export { MockLoadingOverlayComponent as ɵbg } from './lib/components/mock.loadi
 export { MockModalFooterComponent as ɵbi } from './lib/components/mock.modal-footer.component';
 export { MockPageFooterComponent as ɵbj } from './lib/components/mock.page-footer.component';
 export { MockPageActionsComponent as ɵbr, MockPageActionsDirective as ɵbm, MockPageComponent as ɵbs, MockPageContentComponent as ɵbq, MockPageContentDirective as ɵbn, MockPageProgressComponent as ɵbo, MockPageTitleComponent as ɵbp, MockPageTitleDirective as ɵbk, MockPageToolbarTitleDirective as ɵbl } from './lib/components/mock.page.component';
-export { MockProgressCircleComponent as ɵbt } from './lib/components/mock.progress-circle.component';
-export { MockRadioGroupComponent as ɵbu } from './lib/components/mock.radio-group.component';
-export { MockRadioComponent as ɵbv } from './lib/components/mock.radio.component';
-export { MockRangeComponent as ɵbw } from './lib/components/mock.range.component';
-export { MockReorderListComponent as ɵbx } from './lib/components/mock.reorder-list.component';
-export { MockRouterOutletComponent as ɵby } from './lib/components/mock.router-outlet.component';
-export { MockSegmentedControlComponent as ɵbz } from './lib/components/mock.segmented-control.component';
-export { MockSlideButtonComponent as ɵca } from './lib/components/mock.slide-button.component';
-export { MockSpinnerComponent as ɵcb } from './lib/components/mock.spinner.component';
-export { MockTabButtonComponent as ɵcc } from './lib/components/mock.tab-button.component';
-export { MockTabsComponent as ɵcd } from './lib/components/mock.tabs.component';
+export { MockPopoverComponent as ɵbt } from './lib/components/mock.popover.component';
+export { MockProgressCircleComponent as ɵbu } from './lib/components/mock.progress-circle.component';
+export { MockRadioGroupComponent as ɵbv } from './lib/components/mock.radio-group.component';
+export { MockRadioComponent as ɵbw } from './lib/components/mock.radio.component';
+export { MockRangeComponent as ɵbx } from './lib/components/mock.range.component';
+export { MockReorderListComponent as ɵby } from './lib/components/mock.reorder-list.component';
+export { MockRouterOutletComponent as ɵbz } from './lib/components/mock.router-outlet.component';
+export { MockSegmentedControlComponent as ɵca } from './lib/components/mock.segmented-control.component';
+export { MockSlideButtonComponent as ɵcb } from './lib/components/mock.slide-button.component';
+export { MockSpinnerComponent as ɵcc } from './lib/components/mock.spinner.component';
+export { MockTabButtonComponent as ɵcd } from './lib/components/mock.tab-button.component';
+export { MockTabsComponent as ɵce } from './lib/components/mock.tabs.component';
 export { MockTextareaComponent as ɵx } from './lib/components/mock.textarea.component';
-export { MockToggleButtonComponent as ɵcf } from './lib/components/mock.toggle-button.component';
-export { MockToggleComponent as ɵce } from './lib/components/mock.toggle.component';
-export { MockThemeColorDirective as ɵch } from './lib/directives/mock.theme-color.directive';
+export { MockToggleButtonComponent as ɵcg } from './lib/components/mock.toggle-button.component';
+export { MockToggleComponent as ɵcf } from './lib/components/mock.toggle.component';
+export { MockThemeColorDirective as ɵci } from './lib/directives/mock.theme-color.directive';
 export { MOCK_COMPONENTS as ɵa } from './lib/mock-components';
-export { MOCK_DIRECTIVES as ɵcg } from './lib/mock-directives';
+export { MOCK_DIRECTIVES as ɵch } from './lib/mock-directives';