@kirbydesign/designsystem 3.0.15 → 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/components/tabs/index.d.ts

@@ -2,4 +2,4 @@ export { TabsComponent } from './tabs.component';
 export { TabButtonComponent } from './tab-button/tab-button.component';
 export { selectedTabClickEvent } from './tab-button/tab-button.events';
 export { TabsModule } from './tabs.module';
-export { TabsService } from './tabs.service';
+export { TabsService, IonRouterOutlet } from './tabs.service';

package/lib/components/tabs/tabs.service.d.ts

@@ -4,3 +4,4 @@ export declare class TabsService {
     outlet$: import("rxjs").Observable<IonRouterOutlet>;
     setOutlet(outlet: IonRouterOutlet): void;
 }
+export { IonRouterOutlet };

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": "3.0.15",
+  "version": "4.0.2",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-plugin-annotation": "1.0.2",

package/scss/_global-styles.scss

@@ -2,8 +2,10 @@
 @import './base/ionic';
 @import './base/typography';
 @import './base/line-clamp';
+@import './base/list';
 
-:root {
+:root,
+:host {
   --kirby-font-family: 'Roboto';
   font-family: var(--kirby-font-family);
   @each $color, $color-name in $kirby-colors {

package/scss/base/_functions.scss

@@ -101,6 +101,21 @@
   @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 type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
 @mixin slotted($selectors...) {
   ::ng-deep > {
     #{$selectors} {

package/scss/base/_list.scss

@@ -0,0 +1,82 @@
+@import '../utils';
+
+$marker-disc-font-size: 1.8em;
+$marker-cirle-font-size: 0.9em;
+$list-item-line-height: 1.5;
+
+// -----------------------------------------------------------------------------
+// Grid layout
+// -----------------------------------------------------------------------------
+li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  // Nested lists
+  ol,
+  ul {
+    grid-column: 2 / -1;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Spacing
+// -----------------------------------------------------------------------------
+ol,
+ul {
+  padding-inline-start: size('xxxs'); // left
+}
+
+li {
+  &::before {
+    padding-inline-end: size('xs'); // right
+  }
+
+  // Vertical space between list items (excluding the first outermost item)
+  li,
+  & + li {
+    margin-block-start: size('xxs'); // top
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Markers (bullets and numbers)
+// -----------------------------------------------------------------------------
+
+ol,
+ul {
+  list-style: none;
+  counter-reset: item;
+}
+
+// First level marker
+ul > li::before {
+  content: '\2022'; // Unicode disc ("bullet")
+  font-size: $marker-disc-font-size;
+  line-height: ($list-item-line-height / strip-unit($marker-disc-font-size));
+}
+
+// Second level marker
+:where(ol, ul) ul > li::before {
+  content: '\25E6'; // Unicode circle
+  font-size: $marker-cirle-font-size;
+  line-height: ($list-item-line-height / strip-unit($marker-cirle-font-size));
+}
+
+// Third level (and beyond) marker
+:where(ol, ul) :where(ol, ul) ul > li::before {
+  content: '\25AA'; // Unicode square
+}
+
+// Ordered list marker (decimal)
+ol > li::before {
+  content: counter(item) '. ';
+  counter-increment: item;
+}
+
+// -----------------------------------------------------------------------------
+// Typography
+// -----------------------------------------------------------------------------
+
+li {
+  line-height: $list-item-line-height;
+}

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';