@bootkit/ng0 0.0.0-alpha.4 → 0.0.0-alpha.41

package/fesm2022/bootkit-ng0-components-form-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bootkit-ng0-components-form-field.mjs","sources":["../../../projects/ng0/components/form-field/form-field.component.ts","../../../projects/ng0/components/form-field/form-field.component.html","../../../projects/ng0/components/form-field/form-field.module.ts","../../../projects/ng0/components/form-field/bootkit-ng0-components-form-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { DestroyRef, HostListener, input, signal } from '@angular/core';\r\nimport { Component, Input, ContentChild, AfterContentInit, Optional, HostBinding, OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, NgControl, NgForm } from '@angular/forms';\r\nimport { Locale, LocalizationService } from '@bootkit/ng0/localization';\r\n\r\n@Component({\r\n  selector: 'ng0-form-field, ng0-field',\r\n  exportAs: 'ng0FormField',\r\n  templateUrl: './form-field.component.html',\r\n  styleUrls: ['./form-field.component.scss'],\r\n  standalone: true,\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n})\r\nexport class FormFieldComponent implements OnInit, AfterContentInit, OnDestroy {\r\n\r\n  /**\r\n   * The label text for the form field.\r\n   */\r\n  public label = input<string>();\r\n\r\n  /**\r\n   * The hint text to display below the form field.\r\n   * This is typically used to provide additional information or instructions to the user.\r\n   */\r\n  public hint = input<string>();\r\n\r\n  /**\r\n   * If true, the form-field will show validation errors.\r\n   * This is useful for displaying validation messages when the form control is invalid.\r\n   */\r\n  public showErrors = input(true);\r\n\r\n  /**\r\n   * If true, the form-field will show a red asterisk for required fields.\r\n   * This is only a visual indicator and does not enforce validation.\r\n   */\r\n  public showRequiredIndicator = input(true);\r\n\r\n  /**\r\n   * If true, the form-field will show subscripts (e.g. hints, errors) for the field label.\r\n   * This is useful for displaying additional information or validation messages.\r\n   */\r\n  public showSubscripts = input(true);\r\n\r\n  /**\r\n   * If true, the form-field will be rendered inside a \".input-group\" element.\r\n   */\r\n  public inputGroup = input(true);\r\n\r\n  /**\r\n   * Returns the first localized error of the control \r\n   */\r\n  public get errorText() { return this._errorText; }\r\n\r\n  /** Reports whether the control is touched. */\r\n  public get touched(): boolean | null | undefined { return this._ngControl?.touched; }\r\n\r\n  /** Reports whether the control is dirty. */\r\n  public get dirty(): boolean | null | undefined { return this._ngControl?.dirty; }\r\n\r\n  /** Returns true if this form-field is required, otherwise returns false. */\r\n  @HostBinding('class.required-form-field')\r\n  public get isRequired(): boolean { return this._isRequired; }\r\n\r\n  @HostListener('focusout')\r\n  private _onFocusOut() { this._validate(); }\r\n\r\n  @ContentChild(NgControl, { static: true })\r\n  private _ngControl?: NgControl;\r\n\r\n  @ContentChild(NgControl, { static: true, read: ElementRef })\r\n  private _ngControlElement?: ElementRef;\r\n\r\n  private _isRequired = false;\r\n  private _locale?: Locale;\r\n  private _errorText?: string;\r\n\r\n  constructor(\r\n    private _renderer: Renderer2,\r\n    private _destroyRef: DestroyRef,\r\n    @Optional() private _form: NgForm,\r\n    private _ls: LocalizationService,\r\n  ) {\r\n    this._locale = this._ls.get();\r\n    this._ls.change.pipe(takeUntilDestroyed()).subscribe(e => this._locale = e.new);\r\n  }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this._isRequired = this._isRequiredField();\r\n\r\n    if (this._ngControl) {\r\n      this._ngControl?.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(change => {\r\n        this._validate();\r\n      });\r\n    }\r\n  }\r\n\r\n  private _validate() {\r\n    if (!this._ngControl || !this.dirty || !this.touched) {\r\n      return;\r\n    }\r\n\r\n    const invalid = this._ngControl.status === 'INVALID';\r\n    if (invalid) {\r\n      this._errorText = this._locale?.translateFirstError(this._ngControl.errors, 'Invalid')?.text;\r\n    } else {\r\n      this._errorText = undefined;\r\n    }\r\n    this._renderer.addClass(this._ngControlElement!.nativeElement, invalid ? 'is-invalid' : 'is-valid');\r\n    this._renderer.removeClass(this._ngControlElement!.nativeElement, invalid ? 'is-valid' : 'is-invalid');\r\n  }\r\n\r\n  private _isRequiredField(): boolean {\r\n    const validator = this._ngControl?.validator;\r\n    const errors = validator && validator(new FormControl(null));\r\n    return errors != null && errors['required'] === true;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n  }\r\n}\r\n","@if(label()) {\r\n<label class=\"form-field-label\">\r\n  {{label()}}\r\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\r\n</label>\r\n}\r\n\r\n@if(inputGroup()) {\r\n<div class=\"input-group\">\r\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n</div>\r\n}@else {\r\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n}\r\n\r\n<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if(showSubscripts()) {\r\n<div class=\"form-field-subscript-wrapper\">\r\n  @if(showErrors() && errorText && (touched || dirty)) {\r\n  <span class=\"form-field-error text-danger\">\r\n    {{errorText}}\r\n  </span>\r\n  }@if(hint()) {\r\n  <span class=\"form-field-hint\">\r\n    {{hint()}}\r\n  </span>\r\n  }\r\n</div>\r\n}","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormFieldComponent } from './form-field.component';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormFieldComponent,\r\n  ],\r\n  exports: [\r\n    FormFieldComponent,\r\n  ]\r\n})\r\nexport class FormFieldModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bootkit-ng0-components-form-field.mjs","sources":["../../../projects/ng0/components/form-field/form-field.component.ts","../../../projects/ng0/components/form-field/form-field.component.html","../../../projects/ng0/components/form-field/form-field.module.ts","../../../projects/ng0/components/form-field/bootkit-ng0-components-form-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, DestroyRef, ElementRef, HostListener, inject, input, Renderer2, signal, ViewEncapsulation } from '@angular/core';\nimport { Component, ContentChild, AfterContentInit } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, NgControl } from '@angular/forms';\nimport { LocalizationService } from '@bootkit/ng0/localization';\n\n@Component({\n  selector: 'ng0-form-field, ng0-field',\n  exportAs: 'ng0FormField',\n  templateUrl: './form-field.component.html',\n  styleUrls: ['./form-field.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule],\n  host: {\n    '[class.ng0-form-field-required]': '_hasRequiredControl()',\n  }\n})\nexport class FormFieldComponent implements AfterContentInit {\n  @ContentChild(NgControl, { static: true, read: ElementRef }) private _ngControlElement?: ElementRef;\n  private _destroyRef = inject(DestroyRef);\n  private _renderer = inject(Renderer2);\n  private _localizationService = inject(LocalizationService);\n  // private _form = inject(NgForm, { optional: true });\n  @ContentChild(NgControl) protected _ngControl?: NgControl;\n  protected _status = signal<string | null>('');\n  protected _hasRequiredControl = signal(false);\n  protected _errorText = signal<string | undefined>(undefined);\n\n  /**\n   * The label text for the form field.\n   */\n  public readonly label = input<string>();\n\n  /**\n   * The hint text to display below the form field.\n   */\n  public readonly hint = input<string>();\n\n  /**\n   * If true, the form-field will show validation errors.\n   */\n  public readonly showErrors = input(true, { transform: booleanAttribute });\n\n  /**\n   * If undefined, the indicator will be shown based on the control's required state.\n   * If true, the form-field will show a required indicator (*) next to the label (regardless of the control's required state).\n   * If false, the required indicator will not be shown (regardless of the control's required state).\n   */\n  public readonly showRequired = input<boolean | undefined>(undefined);\n\n  /**\n   * If true, the form-field will show subscripts (e.g. hints, errors) for the field label.\n   */\n  public readonly showSubscripts = input(true, { transform: booleanAttribute });\n\n  /**\n   * If true, the form-field will be rendered inside a \".input-group\" element.\n   */\n  public readonly inputGroup = input(true, { transform: booleanAttribute });\n\n  ngAfterContentInit(): void {\n    this._hasRequiredControl.set(this._isControlRequired());\n\n    if (this._ngControl) {\n      this._status.set(this._ngControl.status);\n\n      this._ngControl.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(change => {\n        this._status.set(change);\n        this._checkValidation();\n      });\n\n      this._ngControl.valueChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(value => {\n        if (this._status() === 'INVALID' && this._ngControl!.errors) {\n          this._checkValidation(); // Recheck validation errors\n        }\n      });\n    }\n  }\n\n  private _checkValidation() {\n    if (!this._ngControl || !this._ngControl.touched) {\n      return;\n    }\n\n    let elm = this._ngControlElement!.nativeElement;\n    let invalid = this._status() === 'INVALID';\n    let errorText = invalid ?\n      this._localizationService.get()?.translateFirstError(this._ngControl!.errors, 'Invalid')?.text :\n      undefined;\n\n    this._errorText.set(errorText);\n    this._renderer.addClass(elm, invalid ? 'is-invalid' : 'is-valid');\n    this._renderer.removeClass(elm, invalid ? 'is-valid' : 'is-invalid');\n  }\n\n  private _isControlRequired(): boolean {\n    const validator = this._ngControl?.validator || this._ngControl?.control?.validator;\n    const errors = validator && validator(new FormControl(null));\n    return errors != null && errors['required'] === true;\n  }\n\n  @HostListener('focusout')\n  private _onFocusOut() {\n    this._checkValidation();\n  }\n}\n","@let errorText = _errorText();\n@let showRequiredIndicator = showRequired();\n\n@if(label()) {\n<label class=\"ng0-form-field-label\">\n  {{label()}}\n  @if((showRequiredIndicator === true || (showRequiredIndicator == undefined && _hasRequiredControl()))) {\n  <span class=\"ng0-form-field-required-indicator\">*</span>\n  }\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"ng0-form-field-subscript\">\n  @if(showErrors() && errorText && _ngControl?.touched) {\n  <small class=\"ng0-form-field-error text-danger\" animate.enter=\"ng0-form-field-fadein\">\n    {{errorText}}\n  </small>\n  }@else if(hint()) {\n  <small class=\"ng0-form-field-hint\">\n    {{hint()}}\n  </small>\n  }\n</div>\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormFieldComponent } from './form-field.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormFieldComponent,\n  ],\n  exports: [\n    FormFieldComponent,\n  ]\n})\nexport class FormFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/bootkit-ng0-components-list.mjs

@@ -0,0 +1,564 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, Directive, ChangeDetectorRef, EnvironmentInjector, signal, Renderer2, booleanAttribute, EventEmitter, effect, untracked, computed, TemplateRef, forwardRef, HostListener, Output, ViewChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LocalizationService, defaultFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
+import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, filterPredicateAttribute, trackByIndex, TrackByAttribute, CssClassAttribute, IdGeneratorAttribute, IfDirective } from '@bootkit/ng0/common';
+
+/**
+ * ListItem represents an individual item within a ListComponent.
+ */
+class ListItem {
+    /**
+     * The value associated with the item. This can be of any type.
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /**
+     * The id of the item.
+     */
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    /**
+     * Reference to the parent list component
+     */
+    list = inject(ListComponent);
+    /**
+     * Reference to the host element
+     */
+    elementRef = inject(ElementRef);
+    /**
+     * Indicates whether the item is active.
+     * @returns True if the item is active, false otherwise.
+     */
+    isActive() {
+        return this.list.isActive(this);
+    }
+    /**
+     * Indicates whether the item is selected.
+     * @returns True if the item is selected, false otherwise.
+     */
+    isSelected() {
+        return this.list.isSelected(this.value());
+    }
+    /**
+     * Selects the item.
+     * @returns
+     */
+    select() {
+        return this.list.select(this.value());
+    }
+    /**
+     * Deselects the item.
+     * @returns
+     */
+    deselect() {
+        this.list.deselect(this);
+    }
+    /**
+     * Toggles the selection state of the item.
+     * @returns void
+     */
+    toggle() {
+        this.list.toggle(this.value());
+    }
+    // /**
+    //  * Indicates whether the item is disabled. Default is false.
+    //  */
+    // public readonly disabled = input(false, { transform: booleanAttribute });
+    /**
+     * Scrolls the item into view within its parent container.
+     * @param position The vertical alignment of the item after scrolling.
+     *                 Can be 'start', 'center', 'end', or 'nearest'.
+     *                 Default is 'nearest'.
+     * @param behavior The scrolling behavior.
+     */
+    scrollIntoView(position, behavior) {
+        this.elementRef.nativeElement.scrollIntoView({ block: position, behavior: behavior });
+    }
+    /**
+     * Sets focus on the item.
+     */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    _getTabIndex() {
+        let focus = this.list.focusMode();
+        // if (this.list.isDisabled()) {
+        //     return undefined;
+        // }
+        if (focus == 'none' || focus == 'activeDescendant') {
+            return undefined;
+        }
+        else {
+            // focus: roving
+            return this.isActive() ? 0 : -1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.11", type: ListItem, isStandalone: true, selector: "ng0-list-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.tabIndex": "_getTabIndex()" } }, exportAs: ["ng0ListItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng0-list-item',
+                    exportAs: 'ng0ListItem',
+                    standalone: true,
+                    host: {
+                        '[attr.id]': 'id()',
+                        '[attr.tabIndex]': '_getTabIndex()'
+                    }
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/**
+ * ListComponent is a versatile component that displays a list of items with support for single or multiple selection,
+ * custom item templates, filtering, and keyboard navigation.
+ */
+class ListComponent {
+    _localizationService = inject(LocalizationService);
+    _changeDetector = inject(ChangeDetectorRef);
+    _injector = inject(EnvironmentInjector);
+    _changeCallback;
+    _touchCallback;
+    _selectedItems = new Set();
+    _sourceItems = signal([], ...(ngDevMode ? [{ debugName: "_sourceItems" }] : []));
+    _itemTemplate;
+    _activeItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeItem" }] : []));
+    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _renderer = inject(Renderer2);
+    /**
+     * A list of all visible list items.
+     */
+    listItems;
+    /**
+     * Reference to the host element
+     */
+    elementRef = inject((ElementRef));
+    /**
+     * The data source for the select component.
+     * This can be an array of data, a function that returns an observable of data,
+     * or an instance of DataSource.
+     */
+    source = input.required(...(ngDevMode ? [{ debugName: "source", transform: v => dataSourceAttribute(v) }] : [{
+            transform: v => dataSourceAttribute(v)
+        }]));
+    /**
+     * Indicates whether multi selection is enabled or not.
+     */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    /**
+     * Indicates whether to show selection indicator (checkbox/radio) next to each item.
+     * Default is false.
+     */
+    showSelectionIndicator = input(false, ...(ngDevMode ? [{ debugName: "showSelectionIndicator", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    /**
+    * A comparer to compare items for selection.
+    * Default uses strict equality (===).
+    */
+    compareBy = input(defaultEqualityComparer, ...(ngDevMode ? [{ debugName: "compareBy", transform: equalityComparerAttribute }] : [{
+            transform: equalityComparerAttribute
+        }]));
+    /**
+     * A fromatter to convert each item to a string for display.
+     * Default converts the item to a string using its toString method.
+     */
+    formatBy = input(defaultFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._injector) }] : [{
+            transform: objectFormatterAttribute(this._injector)
+        }]));
+    /**
+     * Custom value writer to extract the value of any object while writing values.
+     */
+    writeBy = input(defaultValueWriter, ...(ngDevMode ? [{ debugName: "writeBy", transform: valueWriterAttribute }] : [{
+            transform: valueWriterAttribute
+        }]));
+    /**
+     * Custom filter function to filter items.
+     * Default is a noop filter that does not filter any items.
+     */
+    filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: filterPredicateAttribute }] : [{
+            transform: filterPredicateAttribute
+        }]));
+    /**
+     * A function that uniquely identifies each item in the list.
+     * If set to a function, it will be called with the index and item as arguments to generate the unique id.
+     * If set to a string, it will be used as the property name to extract the unique id from each item.
+     * Two predifined trackBy options are available:
+     * - '@index': uses the index of the item as its unique id.
+     * - '@item': uses the item itself as its unique id.
+     * @example
+     * trackBy="@index"
+     * trackBy="@item"
+     * trackBy="objectFieldName"
+     * [trackBy]="customTrackByFunction"
+     * @default trackByIndex
+     */
+    trackBy = input(trackByIndex, ...(ngDevMode ? [{ debugName: "trackBy", transform: TrackByAttribute }] : [{
+            transform: TrackByAttribute
+        }]));
+    /**
+     * CSS class or classes to apply to the list container.
+     * Default is undefined.
+     */
+    itemClass = input(undefined, ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
+            transform: CssClassAttribute
+        }]));
+    /**
+     * Defines the focus behavior of the list component.
+     * - 'none': No keyboard interaction is possible. The list cannot be focused.
+     * - 'roving': Roving tabindex is enabled. The list can be focused and the active item is tabbable.
+     * - 'activeDescendant': The list can be focused, but no item is tabbable. The active item is indicated using aria-activedescendant.
+     * @default 'activeDescendant'.
+     */
+    focusMode = input('activeDescendant', ...(ngDevMode ? [{ debugName: "focusMode" }] : []));
+    /**
+     * A function that generates unique ids for each item in the list.
+     * If set to a function, it will be called with the item as an argument to generate the id.
+     * If set to undefined, no ids will be generated for the items.
+     * @default undefined
+     */
+    idGenerator = input(undefined, ...(ngDevMode ? [{ debugName: "idGenerator", transform: IdGeneratorAttribute }] : [{
+            transform: IdGeneratorAttribute
+        }]));
+    /**
+     * Event emitted when the selection state of an item changes by user interaction.
+     */
+    itemSelect = new EventEmitter();
+    /**
+     * The template to use for each item in the list.
+     */
+    itemTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    constructor() {
+        effect(() => {
+            this.source().load(new DataRequest()).subscribe(res => {
+                untracked(() => {
+                    this._activeItem.set(undefined);
+                    this._sourceItems.set(res.data);
+                    this._updateSelectedItems();
+                    this._activateFirstSelectedItem();
+                });
+            });
+        });
+    }
+    /**
+     * Indicates whether an item is active.
+     * @param item
+     * @returns
+     */
+    isActive(item) {
+        return item === this._activeItem();
+    }
+    /**
+     * Indicates whether the given value is selected.
+     * @param item
+     * @returns
+     */
+    isSelected(value) {
+        return this._selectedItems.has(value);
+    }
+    /**
+     * Selects the given value.
+     * @param item
+     */
+    select(value) {
+        if (this.multiple()) {
+            if (!this._selectedItems.has(value)) {
+                this._selectedItems.add(value);
+                this._updateValue();
+                this._changeCallback?.(this._value());
+            }
+        }
+        else {
+            this._selectedItems.clear();
+            this._selectedItems.add(value);
+            this._updateValue();
+            this._changeCallback?.(this._value());
+        }
+    }
+    /**
+     * Deselects the given value.
+     * @param item
+     */
+    deselect(value) {
+        this._selectedItems.delete(value);
+        this._updateValue();
+        this._changeCallback?.(this._value());
+    }
+    /**
+     * Toggles the selection state of the given value.
+     * @param item
+     */
+    toggle(value) {
+        if (this.isSelected(value)) {
+            this.deselect(value);
+        }
+        else {
+            this.select(value);
+        }
+    }
+    /**
+     * Deselects all items in the list.
+     */
+    deselectAll() {
+        this._selectedItems.clear();
+        this._updateValue();
+        this._changeCallback?.(this._value());
+    }
+    /**
+     * Selects all items in the list. Only applicable in multiple selection mode.
+     */
+    selectAll() {
+        if (this.multiple()) {
+            this._selectedItems.clear();
+            this._sourceItems().forEach(i => this._selectedItems.add(i));
+            this._updateValue();
+            this._changeCallback?.(this._value());
+        }
+        else {
+            throw new Error('selectAll is only available in multiple selection mode.');
+        }
+    }
+    /**
+     * Gets the current value(s) of the list.
+     */
+    get value() {
+        return this._value();
+    }
+    /**
+     * Gets the current items in the list.
+     */
+    get items() {
+        return this._sourceItems();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            if (value === null || value === undefined) {
+                value = [];
+            }
+            else if (!Array.isArray(value)) {
+                throw Error('invalid value. Expected an array in multiple selection mode.');
+            }
+        }
+        this._value.set(value);
+        this._updateSelectedItems();
+        this._activateFirstSelectedItem();
+        this._changeDetector.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._changeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this._touchCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._isDisabled.set(isDisabled);
+    }
+    _handleUserSelection(item, index) {
+        let value = item.value();
+        if (this.multiple()) {
+            this.toggle(value);
+        }
+        else {
+            this.select(value);
+        }
+        this._activeItem.set(item);
+        this.itemSelect.emit({ value: item.value(), item: item, list: this });
+        this._changeDetector.detectChanges();
+    }
+    _showLoadingSppiner = computed(() => {
+        let source = this.source();
+        return source.isLoading() && source.type == 'remote';
+    }, ...(ngDevMode ? [{ debugName: "_showLoadingSppiner" }] : []));
+    _updateSelectedItems() {
+        let value = this._value();
+        let compareBy = this.compareBy();
+        let findAndSelect = (v) => {
+            let index = this._sourceItems().findIndex(i => compareBy(i, v));
+            if (index > -1) {
+                let item = this._sourceItems().at(index);
+                this._selectedItems.add(item);
+            }
+            return index;
+        };
+        this._selectedItems.clear();
+        if (this.multiple()) {
+            if (Array.isArray(value)) {
+                value.forEach(v => findAndSelect(v));
+            }
+        }
+        else {
+            findAndSelect(value);
+        }
+    }
+    _activateFirstSelectedItem() {
+        if (this._selectedItems.size > 0) {
+            let value = this._selectedItems.values().next().value;
+            let item = this.listItems?.find(i => i.value() === value);
+            if (item) {
+                this._activeItem.set(item);
+            }
+        }
+    }
+    _updateValue() {
+        let value;
+        if (this.multiple()) {
+            let values = [];
+            this._selectedItems.forEach(v => {
+                values.push(this.writeBy()(v));
+            });
+            value = values;
+        }
+        else {
+            if (this._selectedItems.size > 0) {
+                let first = this._selectedItems.values().next().value;
+                value = this.writeBy()(first);
+            }
+            else {
+                value = undefined;
+            }
+        }
+        this._value.set(value);
+    }
+    _hostAriaActiveDescendant = computed(() => {
+        if (this._activeItem() && !this._isDisabled() && this.focusMode() == 'activeDescendant') {
+            return this._activeItem().id();
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "_hostAriaActiveDescendant" }] : []));
+    _hostTabIndex = computed(() => {
+        let isDisabled = this._isDisabled(); // track the value
+        let activeItem = this._activeItem(); // track the value
+        if (isDisabled) {
+            return undefined;
+        }
+        switch (this.focusMode()) {
+            case 'none':
+                return undefined;
+            case 'activeDescendant':
+                return 0;
+            case 'roving':
+                return activeItem ? undefined : 0;
+        }
+    }, ...(ngDevMode ? [{ debugName: "_hostTabIndex" }] : []));
+    _onHostBlur() {
+        this._touchCallback?.();
+    }
+    _onKeydown(e) {
+        if (this._isDisabled())
+            return;
+        let listLength = this.listItems.length;
+        if (listLength == 0) {
+            return;
+        }
+        let activeItem = this._activeItem();
+        let activeItemindex = activeItem ? this.listItems.toArray().findIndex(i => i === activeItem) : -1;
+        switch (e.key) {
+            case 'ArrowDown':
+                if (activeItemindex < listLength - 1) {
+                    const next = this.listItems.get(activeItemindex + 1);
+                    this._activeItem.set(next);
+                }
+                e.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (activeItemindex == -1) {
+                    const last = this.listItems.get(listLength - 1);
+                    this._activeItem.set(last);
+                }
+                else if (activeItemindex > 0) {
+                    const previous = this.listItems.get(activeItemindex - 1);
+                    this._activeItem.set(previous);
+                }
+                e.preventDefault();
+                break;
+            case 'Enter':
+                if (activeItem) {
+                    this._handleUserSelection(activeItem, activeItemindex);
+                }
+                break;
+            case 'Home':
+                const first = this.listItems.get(0);
+                this._activeItem.set(first);
+                e.preventDefault();
+                break;
+            case 'End':
+                const last = this.listItems.get(listLength - 1);
+                this._activeItem.set(last);
+                e.preventDefault();
+                break;
+        }
+        this._activeItem()?.scrollIntoView('nearest', listLength > 100 ? 'instant' : 'smooth');
+        if (this.focusMode() === 'roving') {
+            this._activeItem()?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: ListComponent, isStandalone: true, selector: "ng0-list, ng0-select-list", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, formatBy: { classPropertyName: "formatBy", publicName: "formatBy", isSignal: true, isRequired: false, transformFunction: null }, writeBy: { classPropertyName: "writeBy", publicName: "writeBy", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "blur": "_onHostBlur()", "keydown": "_onKeydown($event)" }, properties: { "class.ng0-list-loading": "source().isLoading()", "attr.aria-activedescendant": "_hostAriaActiveDescendant()", "attr.disabled": "_isDisabled() ? \"\" : undefined", "attr.aria-disabled": "_isDisabled() ? \"\" : undefined", "attr.tabindex": "_hostTabIndex()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ListComponent),
+                multi: true
+            }], queries: [{ propertyName: "_itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "listItems", predicate: ListItem, descendants: true }], exportAs: ["ng0List"], ngImport: i0, template: "@let filter = filterBy();\n@let formatter = formatBy();\n\n@for (item of _sourceItems(); track trackBy()($index, item)) {\n\n<ng0-list-item #listItem=\"ng0ListItem\"\n               *ng0If=\"!filter || filter(item)\"\n               [value]=\"item\"\n               [id]=\"idGenerator()?.(item)\"\n               [class.active]=\"isActive(listItem)\"\n               [class.selected]=\"isSelected(item)\"\n               [ngClass]=\"itemClass()?.(item)\"\n               (click)=\"_handleUserSelection(listItem, $index);\">\n\n       @if(itemTemplate() || _itemTemplate) {\n       @let template = itemTemplate() || _itemTemplate;\n       <ng-container *ngTemplateOutlet=\"template; context: { $implicit: {item: listItem, value: item}}\" />\n       } @else {\n       @if(showSelectionIndicator()) {\n       <input class=\"form-check-input ng0-selection-indicator\"\n              tabindex=\"-1\"\n              [checked]=\"isSelected(item)\"\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\">\n       }\n\n       {{formatter(item)}}\n       }\n</ng0-list-item>\n}\n\n@if(_showLoadingSppiner()) {\n@if(_sourceItems().length == 0) {\n<div style=\"text-align: center; padding: 0.5rem 0;\">\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\n</div>\n}@else {\n<div class=\"ng0-list-loading-cover\">\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\n</div>\n}\n}\n\n<ng-template #spinner>\n       <div class=\"spinner-border spinner-sm text-primary ng0-list-loading-indicator\" role=\"status\">\n              <span class=\"visually-hidden\">Loading...</span>\n       </div>\n</ng-template>", styles: ["ng0-list:not(.ng0-list-unstyled){display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}ng0-list:not(.ng0-list-unstyled):focus,ng0-list:not(.ng0-list-unstyled):focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list:not(.ng0-list-unstyled)[disabled],ng0-list:not(.ng0-list-unstyled).disabled{opacity:.5;pointer-events:none}ng0-list:not(.ng0-list-unstyled) .ng0-list-loading-cover{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;align-items:center;justify-content:center}ng0-list:not(.ng0-list-unstyled) ng0-list-item{display:flex}ng0-list:not(.ng0-list-unstyled) ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus,ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list:not(.ng0-list-unstyled) ng0-list-item{padding:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list:not(.ng0-list-unstyled) ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IfDirective, selector: "[ng0If]", inputs: ["ng0If"], exportAs: ["ng0If"] }, { kind: "directive", type: ListItem, selector: "ng0-list-item", inputs: ["value", "id"], exportAs: ["ng0ListItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-list, ng0-select-list', exportAs: 'ng0List', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        IfDirective,
+                        ListItem
+                    ], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ListComponent),
+                            multi: true
+                        }], host: {
+                        '[class.ng0-list-loading]': 'source().isLoading()',
+                        '[attr.aria-activedescendant]': '_hostAriaActiveDescendant()',
+                        '[attr.disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.tabindex]': '_hostTabIndex()',
+                    }, template: "@let filter = filterBy();\n@let formatter = formatBy();\n\n@for (item of _sourceItems(); track trackBy()($index, item)) {\n\n<ng0-list-item #listItem=\"ng0ListItem\"\n               *ng0If=\"!filter || filter(item)\"\n               [value]=\"item\"\n               [id]=\"idGenerator()?.(item)\"\n               [class.active]=\"isActive(listItem)\"\n               [class.selected]=\"isSelected(item)\"\n               [ngClass]=\"itemClass()?.(item)\"\n               (click)=\"_handleUserSelection(listItem, $index);\">\n\n       @if(itemTemplate() || _itemTemplate) {\n       @let template = itemTemplate() || _itemTemplate;\n       <ng-container *ngTemplateOutlet=\"template; context: { $implicit: {item: listItem, value: item}}\" />\n       } @else {\n       @if(showSelectionIndicator()) {\n       <input class=\"form-check-input ng0-selection-indicator\"\n              tabindex=\"-1\"\n              [checked]=\"isSelected(item)\"\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\">\n       }\n\n       {{formatter(item)}}\n       }\n</ng0-list-item>\n}\n\n@if(_showLoadingSppiner()) {\n@if(_sourceItems().length == 0) {\n<div style=\"text-align: center; padding: 0.5rem 0;\">\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\n</div>\n}@else {\n<div class=\"ng0-list-loading-cover\">\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\n</div>\n}\n}\n\n<ng-template #spinner>\n       <div class=\"spinner-border spinner-sm text-primary ng0-list-loading-indicator\" role=\"status\">\n              <span class=\"visually-hidden\">Loading...</span>\n       </div>\n</ng-template>", styles: ["ng0-list:not(.ng0-list-unstyled){display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}ng0-list:not(.ng0-list-unstyled):focus,ng0-list:not(.ng0-list-unstyled):focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list:not(.ng0-list-unstyled)[disabled],ng0-list:not(.ng0-list-unstyled).disabled{opacity:.5;pointer-events:none}ng0-list:not(.ng0-list-unstyled) .ng0-list-loading-cover{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;align-items:center;justify-content:center}ng0-list:not(.ng0-list-unstyled) ng0-list-item{display:flex}ng0-list:not(.ng0-list-unstyled) ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus,ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list:not(.ng0-list-unstyled) ng0-list-item{padding:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list:not(.ng0-list-unstyled) ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], listItems: [{
+                type: ViewChildren,
+                args: [ListItem]
+            }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSelectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionIndicator", required: false }] }], compareBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareBy", required: false }] }], formatBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatBy", required: false }] }], writeBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "writeBy", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], idGenerator: [{ type: i0.Input, args: [{ isSignal: true, alias: "idGenerator", required: false }] }], itemSelect: [{
+                type: Output
+            }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], _onHostBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const Items = [ListComponent];
+/**
+ * List module.
+ */
+class ListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.11", ngImport: i0, type: ListModule, imports: [ListComponent], exports: [ListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListModule, imports: [Items] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: Items,
+                    exports: Items
+                }]
+        }] });
+
+// export  *  from './types';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListComponent, ListModule };
+//# sourceMappingURL=bootkit-ng0-components-list.mjs.map