ngx-bsl 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bsl",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/Viggo97/ngx-bsl.git"

package/styles/components/_list-box.scss

@@ -0,0 +1,10 @@
+.ngx-bsl-list-box {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    border: 1px solid var(--bsl-list-box-borderColor);
+    border-radius: 6px;
+    background-color: var(--bsl-list-box-backgroundColor);
+    overflow: hidden;
+}

package/styles/index.scss

@@ -4,6 +4,7 @@
 
 @forward 'components/button';
 @forward 'components/input';
+@forward 'components/list-box';
 @forward 'components/overlay';
 
 @forward 'themes/light-theme';

package/types/ngx-bsl.d.ts

@@ -1,45 +1,72 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterContentInit, ElementRef, PipeTransform, OnDestroy } from '@angular/core';
+import { ElementRef, OnInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { Subject } from 'rxjs';
 
-declare class GroupData<T> {
-    group: string;
-    data: T[];
-    constructor(group: string, data: T[]);
+declare class ListBoxOptionComponent<TOption> {
+    value: _angular_core.InputSignal<TOption>;
+    id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxOptionComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListBoxOptionComponent<any>, "ngx-bsl-list-box-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ComboboxComponent<TOption extends Record<string, unknown> | string> implements ControlValueAccessor {
+declare class ListBoxDirective<TOption> {
+    listBoxId: _angular_core.InputSignal<string | undefined>;
+    listBoxAriaLabel: _angular_core.InputSignal<string | undefined>;
+    listBoxAriaLabelledby: _angular_core.InputSignal<string | undefined>;
+    optionValueEquality: _angular_core.InputSignal<(value: any, optionValue: any) => boolean>;
+    listBoxOptions: _angular_core.Signal<readonly ListBoxOptionComponent<TOption>[]>;
+    listBoxOptionRefs: _angular_core.Signal<readonly ElementRef<HTMLElement>[]>;
+    ariaActiveDescendant: _angular_core.WritableSignal<string | null>;
+    selectOption: Subject<TOption | null>;
+    hasAriaSelected: boolean;
+    initSelectedOption(value: any): void;
+    onClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    private handleSelectionKeys;
+    private handleArrowKeys;
+    private getVisuallyFocusedOptionRefIndex;
+    setVisualFocus(optionIndex: number): void;
+    private removeVisualFocus;
+    clearVisualFocus(): void;
+    private setSelectedAttribute;
+    private removeSelectedAttribute;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListBoxDirective<any>, "[ngxBslListBox]", never, { "listBoxId": { "alias": "listBoxId"; "required": false; "isSignal": true; }; "listBoxAriaLabel": { "alias": "listBoxAriaLabel"; "required": false; "isSignal": true; }; "listBoxAriaLabelledby": { "alias": "listBoxAriaLabelledby"; "required": false; "isSignal": true; }; "optionValueEquality": { "alias": "optionValueEquality"; "required": false; "isSignal": true; }; }, {}, ["listBoxOptions", "listBoxOptionRefs"], never, true, never>;
+}
+
+declare class ComboboxComponent<TOption> implements ControlValueAccessor, OnInit {
+    protected listBox: ListBoxDirective<TOption>;
+    private destroyRef;
     id: _angular_core.InputSignal<string>;
-    options: _angular_core.InputSignal<string[] | TOption[]>;
-    bindLabel: _angular_core.InputSignal<string | undefined>;
-    groupBy: _angular_core.InputSignal<string | undefined>;
-    comparisonField: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
     ariaLabel: _angular_core.InputSignal<string | undefined>;
     ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    optionValueParse: _angular_core.InputSignal<(option: TOption) => string>;
     confirmSelection: _angular_core.OutputEmitterRef<void>;
-    private listBox;
     onChange: (_value: string) => void;
     onTouch: () => void;
-    protected value: _angular_core.WritableSignal<string>;
+    value: _angular_core.ModelSignal<string>;
     protected open: _angular_core.WritableSignal<boolean>;
     protected ariaActiveDescendant: _angular_core.Signal<string | null>;
-    protected initialFocusedOptionIndex: _angular_core.WritableSignal<number | null>;
-    protected groupedOptions: _angular_core.Signal<GroupData<TOption>[]>;
-    private ignoreOptionsUpdate;
+    private optionSelecting;
+    private optionChangedBy;
     constructor();
+    ngOnInit(): void;
+    private subscribeSelectOption;
     protected showListBox(): void;
     protected hideListBox(): void;
     protected onClick(): void;
-    protected onSelectOption(value: TOption | string): void;
+    protected onBlur(): void;
+    protected onListBoxPointerDown(event: PointerEvent): void;
+    protected onListBoxClick(event: MouseEvent): void;
     protected onInputChange(event: InputEvent): void;
     protected onKeydown(event: KeyboardEvent): void;
-    private groupDataBy;
     registerOnChange(onChange: (value: string) => void): void;
     registerOnTouched(onTouch: () => void): void;
     writeValue(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ngx-bsl-combobox", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "comparisonField": { "alias": "comparisonField"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "confirmSelection": "confirmSelection"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ngx-bsl-combobox", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "optionValueParse": { "alias": "optionValueParse"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "confirmSelection": "confirmSelection"; "value": "valueChange"; }, never, ["*"], true, [{ directive: typeof ListBoxDirective; inputs: { "listBoxId": "listBoxId"; "listBoxAriaLabel": "listBoxAriaLabel"; "listBoxAriaLabelledby": "listBoxAriaLabelledby"; "optionValueEquality": "optionValueEquality"; }; outputs: {}; }]>;
 }
 
 declare class CheckboxComponent implements ControlValueAccessor {
@@ -70,63 +97,12 @@ declare class DrawerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "ngx-bsl-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
 }
 
-declare class ListBoxOptionComponent<TOption> {
-    value: _angular_core.InputSignal<TOption>;
-    id: _angular_core.InputSignal<string>;
-    private optionIdGenerator;
-    protected listBoxOptionId: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxOptionComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListBoxOptionComponent<any>, "ngx-bsl-list-box-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-declare class ListBoxComponent<TOption> implements OnInit, AfterContentInit, ControlValueAccessor {
-    id: _angular_core.InputSignal<string>;
-    ariaLabel: _angular_core.InputSignal<string | undefined>;
-    ariaLabelledby: _angular_core.InputSignal<string | undefined>;
-    exposeAriaActiveDescendant: _angular_core.InputSignal<boolean>;
-    comparisonField: _angular_core.InputSignal<keyof TOption | undefined>;
-    initialValue: _angular_core.InputSignal<TOption | null | undefined>;
-    initialFocusedOptionIndex: _angular_core.InputSignal<number | null>;
-    selectOption: _angular_core.OutputEmitterRef<TOption>;
-    listBoxOptions: _angular_core.Signal<readonly ListBoxOptionComponent<TOption>[]>;
-    listBoxOptionRefs: _angular_core.Signal<readonly ElementRef<HTMLElement>[]>;
-    ariaActiveDescendant: _angular_core.WritableSignal<string | null>;
-    onChange: (_value: TOption) => void;
-    onTouch: () => void;
-    private value;
-    ngOnInit(): void;
-    ngAfterContentInit(): void;
-    onClick(event: MouseEvent): void;
-    onKeydown(event: KeyboardEvent): void;
-    private initSelectedOption;
-    private equalsToCurrentValue;
-    private handleSelectionKeys;
-    private handleArrowKeys;
-    private getVisuallyFocusedListBoxOptionRefIndex;
-    private setVisualFocus;
-    private removeVisualFocus;
-    protected clearVisualFocus(): void;
-    protected setSelectedAttribute(optionIndex: number): void;
-    protected removeSelectedAttribute(): void;
-    registerOnChange(onChange: (value: TOption) => void): void;
-    registerOnTouched(onTouch: () => void): void;
-    writeValue(value: TOption): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListBoxComponent<any>, "ngx-bsl-list-box", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "exposeAriaActiveDescendant": { "alias": "exposeAriaActiveDescendant"; "required": false; "isSignal": true; }; "comparisonField": { "alias": "comparisonField"; "required": false; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "initialFocusedOptionIndex": { "alias": "initialFocusedOptionIndex"; "required": false; "isSignal": true; }; }, { "selectOption": "selectOption"; }, ["listBoxOptions", "listBoxOptionRefs"], ["*"], true, never>;
-}
-
 declare class ListBoxGroupComponent {
     title: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListBoxGroupComponent, "ngx-bsl-list-box-group", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ListBoxOptionValueConverterPipe implements PipeTransform {
-    transform(value: unknown, bindLabel?: string): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxOptionValueConverterPipe, never>;
-    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ListBoxOptionValueConverterPipe, "listBoxOptionValueConverter", true>;
-}
-
 declare class ListBoxSeparatorComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxSeparatorComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListBoxSeparatorComponent, "ngx-bsl-list-box-separator", never, {}, {}, never, never, true, never>;
@@ -261,34 +237,36 @@ declare class RangeComponent implements ControlValueAccessor, OnInit, OnDestroy
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RangeComponent, "ngx-bsl-range", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "showThumbLabels": { "alias": "showThumbLabels"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
-declare class SelectComponent<TOption> implements ControlValueAccessor {
+declare class SelectComponent<TOption, TValue> implements ControlValueAccessor, OnInit {
+    protected listBox: ListBoxDirective<TOption>;
+    private destroyRef;
     id: _angular_core.InputSignal<string>;
-    options: _angular_core.InputSignal<TOption[]>;
-    bindLabel: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
     ariaLabel: _angular_core.InputSignal<string | undefined>;
     ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
-    comparisonField: _angular_core.InputSignal<keyof TOption | undefined>;
     iconMode: _angular_core.InputSignal<boolean>;
     customIcon: _angular_core.InputSignal<boolean>;
     dropdownWidth: _angular_core.InputSignal<string | undefined>;
-    private listBox;
-    onChange: (_value: TOption) => void;
+    optionValueParse: _angular_core.InputSignal<(option: TOption) => TValue>;
+    displayLabel: _angular_core.InputSignal<string | undefined>;
+    onChange: (_value: TValue) => void;
     onTouch: () => void;
-    value: _angular_core.ModelSignal<TOption | undefined>;
+    value: _angular_core.ModelSignal<TValue | undefined>;
     protected open: _angular_core.WritableSignal<boolean>;
     protected ariaActiveDescendant: _angular_core.Signal<string | null>;
-    protected initialFocusedOptionIndex: _angular_core.WritableSignal<number | null>;
+    protected displayValue: _angular_core.Signal<TValue | (TValue & object)[keyof TValue] | undefined>;
+    ngOnInit(): void;
+    private subscribeSelectOption;
     protected showListBox(): void;
     protected hideListBox(): void;
     protected onClick(): void;
-    protected onSelectOption(value: TOption): void;
+    protected onListBoxClick(event: MouseEvent): void;
     protected onKeydown(event: KeyboardEvent): void;
-    registerOnChange(onChange: (value: TOption) => void): void;
+    registerOnChange(onChange: (value: TValue) => void): void;
     registerOnTouched(onTouch: () => void): void;
-    writeValue(value: TOption): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "ngx-bsl-select", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "comparisonField": { "alias": "comparisonField"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "customIcon": { "alias": "customIcon"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-custom-icon]", "[data-custom-icon]"], true, never>;
+    writeValue(value: TValue): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any, any>, "ngx-bsl-select", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "customIcon": { "alias": "customIcon"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "optionValueParse": { "alias": "optionValueParse"; "required": false; "isSignal": true; }; "displayLabel": { "alias": "displayLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-custom-icon]", "[data-custom-icon]", "*"], true, [{ directive: typeof ListBoxDirective; inputs: { "listBoxId": "listBoxId"; "listBoxAriaLabel": "listBoxAriaLabel"; "listBoxAriaLabelledby": "listBoxAriaLabelledby"; "optionValueEquality": "optionValueEquality"; }; outputs: {}; }]>;
 }
 
 declare enum TooltipPosition {
@@ -311,4 +289,4 @@ declare class TooltipDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[ngxBslTooltip]", never, { "message": { "alias": "ngxBslTooltip"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { CheckboxComponent, ComboboxComponent, DrawerComponent, IconCheckComponent, IconChevronDownComponent, IconCompanyComponent, IconLanguageComponent, IconLocationComponent, IconMoonComponent, IconSunComponent, IconXMarkComponent, ListBoxComponent, ListBoxGroupComponent, ListBoxOptionComponent, ListBoxOptionValueConverterPipe, ListBoxSeparatorComponent, PaginationComponent, RangeComponent, SelectComponent, TooltipDirective };
+export { CheckboxComponent, ComboboxComponent, DrawerComponent, IconCheckComponent, IconChevronDownComponent, IconCompanyComponent, IconLanguageComponent, IconLocationComponent, IconMoonComponent, IconSunComponent, IconXMarkComponent, ListBoxDirective, ListBoxGroupComponent, ListBoxOptionComponent, ListBoxSeparatorComponent, PaginationComponent, RangeComponent, SelectComponent, TooltipDirective };