@kirbydesign/extensions-angular 4.2.0 → 4.4.0-rc.0

package/types/kirbydesign-extensions-angular-combobox.d.ts

@@ -0,0 +1,206 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, EventEmitter, TemplateRef, QueryList, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';
+import { InputSize } from '@kirbydesign/designsystem/form-field';
+import { FormFieldControl } from '@kirbydesign/designsystem/types';
+import { ResizeObserverService } from '@kirbydesign/designsystem/shared';
+
+declare class ComboboxComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl {
+    private renderer;
+    private elementRef;
+    private cdr;
+    private resizeObserverService;
+    static readonly OPEN_DELAY_IN_MS = 100;
+    private state;
+    private _popout;
+    private _attributesToForward;
+    _listboxId: string;
+    _comboboxId: string;
+    private readonly _defaultSearchFunction;
+    private compareAlphabetically;
+    /**
+     * The text to display when the search returns no results.
+     */
+    noSearchResultsText: string;
+    /**
+     * The name of the property to use as the display text for each item.
+     */
+    itemTextProperty: string;
+    protected getItemText(item: unknown): string;
+    /**
+     * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.
+     */
+    itemHeight: number;
+    protected get dropdownMaxHeight(): number;
+    protected get dropdownMinHeight(): number;
+    protected get viewportHeight(): number;
+    private isTypeString;
+    private objectHasItemTextProperty;
+    private objectHasItemIdProperty;
+    /**
+     * The name of the property to use as the unique identifier for each item.
+     */
+    itemIdProperty: string;
+    protected getItemId(item: unknown): string;
+    /**
+     * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.
+     */
+    searchFunction: (searchTerm: string, itemsToSearch: unknown[]) => unknown[];
+    private _searchItems;
+    protected get searchItems(): unknown[];
+    private set searchItems(value);
+    private _items;
+    get items(): unknown[];
+    /**
+     * The list of items to display in the dropdown.
+     * @param value
+     */
+    set items(value: unknown[]);
+    private _selectedItem;
+    get selectedItem(): unknown;
+    /**
+     * The currently selected item.
+     * @param value
+     */
+    set selectedItem(value: unknown);
+    private _focusedItem;
+    get focusedItem(): unknown;
+    set focusedItem(item: unknown);
+    private getIndexOfItem;
+    private getKirbyElement;
+    private setAriaPosinsetOnElement;
+    /**
+     * The placeholder text to display in the input when no item is selected and the input is empty.
+     */
+    placeholder: string;
+    /**
+     * The direction in which the dropdown should open relative to the input.
+     * @param direction
+     */
+    set popout(direction: HorizontalDirection | `${HorizontalDirection}`);
+    get popout(): HorizontalDirection | `${HorizontalDirection}`;
+    /**
+     * If the combobox needs to expand to full width of its parent container, then use expand.
+     */
+    expand?: 'block';
+    /**
+     * When `true`, the user cannot interact with the combobox.
+     */
+    disabled: boolean;
+    get _isDisabled(): 'disabled' | null;
+    /**
+     * Will emit the new value when error changes.
+     */
+    hasErrorChange: EventEmitter<boolean>;
+    private _hasError;
+    /**
+     * When `true`, the combobox will be styled with error styles.
+     */
+    get hasError(): boolean;
+    set hasError(value: boolean);
+    /**
+     * The size of the input element.
+     */
+    size: InputSize;
+    get _noBlurOnScroll(): boolean;
+    /**
+     * Emitted when an item is selected (tap on mobile, click/keypress on web)
+     */
+    change: EventEmitter<unknown>;
+    value: unknown;
+    get _isBlockLevel(): boolean;
+    get _isOpening(): boolean;
+    get isOpen(): boolean;
+    get hasValue(): boolean;
+    itemTemplate?: TemplateRef<unknown>;
+    slottedItems?: QueryList<ElementRef<HTMLElement>>;
+    cardElement?: ElementRef<HTMLElement>;
+    popover?: PopoverComponent;
+    rootElement: ElementRef<HTMLElement>;
+    private textInput;
+    get interactiveElement(): HTMLElement;
+    private virtualScrollViewport?;
+    private forwardAriaLabelToCombobox;
+    kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;
+    _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;
+    set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>);
+    get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined;
+    private disposeItemClickListeners;
+    constructor(renderer: Renderer2, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, resizeObserverService: ResizeObserverService);
+    protected onToggle(event: MouseEvent): void;
+    private toggle;
+    ngAfterViewInit(): void;
+    private setPopoverCardStyle;
+    ngOnDestroy(): void;
+    open(): void;
+    private showPopOver;
+    close(): void;
+    protected onItemSelect(item: unknown): void;
+    private onChange;
+    private onTouched;
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param value New value to be written to the model.
+     */
+    writeValue(value: string): void;
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the value changes.
+     */
+    registerOnChange(fn: (value: unknown) => void): void;
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the component has been touched.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Disables the select. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param isDisabled Sets whether the component is disabled.
+     */
+    setDisabledState?(isDisabled: boolean): void;
+    private selectItem;
+    private selectItemByInput;
+    protected updateSearchResults(event: Event): void;
+    protected onPopoverWillHide(): void;
+    protected onPopoverClick(): void;
+    onMouseDown(event: MouseEvent): void;
+    onTouchStart(event: TouchEvent): void;
+    onFocusOut(): void;
+    onTab(): void;
+    onEscape(): void;
+    onEnterO(event: Event): void;
+    onArrowKeys(event: Event): void;
+    private handleFocusNavigation;
+    private shiftFocusIndex;
+    private setFocusOnFirstOrLastItem;
+    private setFocusOnSelectedItem;
+    private setFocusOnLastItem;
+    private setFocusOnFirstItem;
+    private unlistenAllSlottedItems;
+    private unobserveResize;
+    /**
+     * Resolve a model/data item based on current `items` by comparing displayed text.
+     * This is used to map an incoming form value or input `selectedItem` to an item
+     * from the list.
+     */
+    private findItemByInput;
+    private setInputDisplayValue;
+    private scrollFocusedItemIntoViewWhileNavigating;
+    private getKirbyItems;
+    private scrollToIndexIntoViewWhenOpeningPopup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComboboxComponent, "kirby-x-combobox", never, { "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; }; "itemTextProperty": { "alias": "itemTextProperty"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemIdProperty": { "alias": "itemIdProperty"; "required": false; }; "searchFunction": { "alias": "searchFunction"; "required": false; }; "items": { "alias": "items"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "popout": { "alias": "popout"; "required": false; }; "expand": { "alias": "expand"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "hasErrorChange": "hasErrorChange"; "change": "change"; }, ["itemTemplate", "slottedItems", "kirbyItemsSlotted"], never, true, never>;
+}
+
+export { ComboboxComponent };

package/types/kirbydesign-extensions-angular-sidebar-menu.d.ts

@@ -1,6 +1,7 @@
 import { ThemeColor } from '@kirbydesign/designsystem';
 import { Params } from '@angular/router';
 import * as rxjs from 'rxjs';
+import * as _kirbydesign_extensions_angular_sidebar_menu from '@kirbydesign/extensions-angular/sidebar-menu';
 import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
 
@@ -56,6 +57,7 @@ type SubmenuItem = {
     type: 'submenu';
     title: string;
     icon?: string;
+    isReorderable?: boolean;
     children: SidebarMenuItem[];
 };
 
@@ -76,6 +78,14 @@ type CheckEvent = {
     isChecked: boolean;
 };
 
+type SidebarMenuItemReorderEvent = {
+    parentId: string;
+    itemId: string;
+    previousIndex: number;
+    currentIndex: number;
+    reorderedItemIds: string[];
+};
+
 declare class SidebarComponent {
     #private;
     set menuItems(menuItems: SidebarMenuItem[]);
@@ -83,15 +93,17 @@ declare class SidebarComponent {
     set expandedItems(value: Set<string>);
     set checkedItems(value: Set<string>);
     set autoCollapse(value: boolean);
+    menuItemsChange: EventEmitter<SidebarMenuItem[]>;
     selectedItemChange: EventEmitter<string>;
     expandedItemsChange: EventEmitter<Set<string>>;
     checkedItemsChange: EventEmitter<Set<string>>;
-    expandChange: rxjs.Observable<ExpandEvent>;
-    checkChange: rxjs.Observable<CheckEvent>;
+    expandChange: rxjs.Observable<_kirbydesign_extensions_angular_sidebar_menu.ExpandEvent>;
+    checkChange: rxjs.Observable<_kirbydesign_extensions_angular_sidebar_menu.CheckEvent>;
+    itemReorder: rxjs.Observable<_kirbydesign_extensions_angular_sidebar_menu.SidebarMenuItemReorderEvent>;
     itemSelect: rxjs.Observable<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "kirby-x-sidebar", never, { "menuItems": { "alias": "menuItems"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "expandedItems": { "alias": "expandedItems"; "required": false; }; "checkedItems": { "alias": "checkedItems"; "required": false; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; }; }, { "selectedItemChange": "selectedItemChange"; "expandedItemsChange": "expandedItemsChange"; "checkedItemsChange": "checkedItemsChange"; "expandChange": "expandChange"; "checkChange": "checkChange"; "itemSelect": "itemSelect"; }, never, ["kirby-x-sidebar-header", "kirby-x-sidebar-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "kirby-x-sidebar", never, { "menuItems": { "alias": "menuItems"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "expandedItems": { "alias": "expandedItems"; "required": false; }; "checkedItems": { "alias": "checkedItems"; "required": false; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; }; }, { "menuItemsChange": "menuItemsChange"; "selectedItemChange": "selectedItemChange"; "expandedItemsChange": "expandedItemsChange"; "checkedItemsChange": "checkedItemsChange"; "expandChange": "expandChange"; "checkChange": "checkChange"; "itemReorder": "itemReorder"; "itemSelect": "itemSelect"; }, never, ["kirby-x-sidebar-header", "kirby-x-sidebar-footer"], true, never>;
 }
 
 declare class SidebarFooterComponent {
@@ -111,4 +123,4 @@ declare class SidebarModule {
 }
 
 export { SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule };
-export type { ActionItem, Badge, CheckEvent, ExpandEvent, ExternalLinkItem, RouterLinkItem, SidebarMenuItem, SubmenuItem, Toggle };
+export type { ActionItem, Badge, CheckEvent, ExpandEvent, ExternalLinkItem, RouterLinkItem, SidebarMenuItem, SidebarMenuItemReorderEvent, SubmenuItem, Toggle };