@bootkit/ng0 0.0.0-alpha.20 → 0.0.0-alpha.22

package/components/dropdown/index.d.ts

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { Placement, CssClass } from '@bootkit/ng0/common';
+
+declare class DropdownDividerComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownDividerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownDividerComponent, "ng0-dropdown-divider", ["ng0DropdownDivider"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Defines the possible values for the dropdown auto-close behavior.
+ *
+ * 'default': The dropdown will close when clicking inside or outside the menu.
+ * 'inside': The dropdown will close only when clicking inside the menu.
+ * 'outside': The dropdown will close only when clicking outside the menu.
+ * 'manual': The dropdown will not close automatically; it must be closed programmatically.
+ */
+type DropdownAutoCloseBehavior = 'default' | 'inside' | 'outside' | 'manual';
+/**
+ *
+ */
+type DropdownSize = 'default' | 'small' | 'large';
+
+declare class DropdownComponent {
+    private _dropdownMenu;
+    private _mainButton;
+    private _splitButton?;
+    protected _el: ElementRef<any>;
+    private _renderer;
+    /**
+     * The placement of the dropdown menu in relation to the dropdown toggle.
+     */
+    placement: i0.InputSignal<Placement>;
+    /**
+     * The CSS classes to apply to the dropdown toggle button.
+     * @default 'btn btn-primary'
+     */
+    cssClass: i0.InputSignal<CssClass>;
+    /**
+     * The CSS classes to apply to the dropdown split button.
+     * @default 'btn btn-primary'
+     */
+    splitCssClass: i0.InputSignal<CssClass>;
+    /**
+     * Indicates whether the dropdown is open or closed.
+     * @default false
+     */
+    readonly open: i0.ModelSignal<boolean>;
+    /**
+     * Indicates whether the dropdown is a split button.
+     * A split button dropdown has a separate toggle button.
+     * @default false
+     */
+    readonly split: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicates whether the dropdown has an automatic close behavior.
+     * @default 'default'
+     */
+    readonly autoClose: i0.InputSignal<DropdownAutoCloseBehavior>;
+    /**
+     * Dropdown size
+     * @default 'default'
+     */
+    readonly size: i0.InputSignal<DropdownSize>;
+    protected _directionCssClass: i0.Signal<"dropup" | "dropstart" | "dropend" | undefined>;
+    constructor();
+    /**
+     * Toggle the dropdown open or closed.
+     */
+    toggle(): void;
+    private _onDocumentClick;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "ng0-dropdown", ["ng0Dropdown"], { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "cssClass": { "alias": "cssClass"; "required": false; "isSignal": true; }; "splitCssClass": { "alias": "splitCssClass"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "split": { "alias": "split"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["_dropdownMenu"], ["*", "ng0-dropdown-menu"], true, never>;
+}
+
+declare class DropdownMenuComponent {
+    private _renderer;
+    private _dropdown;
+    elementRef: ElementRef<any>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuComponent, "ng0-dropdown-menu", ["ng0Dropdownmenu"], {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * An item within a dropdown menu.
+ */
+declare class DropdownItemComponent {
+    /**
+     * The CSS classes to apply to the dropdown item.
+     * */
+    readonly cssClass: i0.InputSignal<CssClass>;
+    /**
+     * Whether the dropdown item is disabled.
+     */
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    private _onClick;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownItemComponent, "ng0-dropdown-item", ["ng0DropdownItem"], { "cssClass": { "alias": "cssClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * A link item within a dropdown menu.
+ * This component is used to create a navigable link inside a dropdown.
+ */
+declare class DropdownLinkComponent {
+    /**
+     * The link or URL to navigate to when the dropdown item is clicked.
+     */
+    readonly link: i0.InputSignal<string | string[] | undefined>;
+    /**
+     * The router link active class to apply when the link is active.
+     */
+    readonly active: i0.InputSignal<string | string[]>;
+    /**
+     * Specifies where to open the linked document.
+     */
+    readonly target: i0.InputSignal<"_self" | "_blank" | "_parent" | "_top" | undefined>;
+    /**
+     * Whether the dropdown link is disabled.
+     */
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    private _onClick;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownLinkComponent, "ng0-dropdown-link", ["ng0DropdownLink"], { "link": { "alias": "link"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class DropdownHeaderComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownHeaderComponent, "ng0-dropdown-header", ["ng0DropdownItem"], {}, {}, never, ["*"], true, never>;
+}
+
+declare class DropdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DropdownModule, never, [typeof DropdownComponent, typeof DropdownMenuComponent, typeof DropdownItemComponent, typeof DropdownLinkComponent, typeof DropdownHeaderComponent, typeof DropdownDividerComponent], [typeof DropdownComponent, typeof DropdownMenuComponent, typeof DropdownItemComponent, typeof DropdownLinkComponent, typeof DropdownHeaderComponent, typeof DropdownDividerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DropdownModule>;
+}
+
+export { DropdownComponent, DropdownDividerComponent, DropdownHeaderComponent, DropdownItemComponent, DropdownLinkComponent, DropdownMenuComponent, DropdownModule };
+export type { DropdownAutoCloseBehavior, DropdownSize };

package/components/list/index.d.ts

@@ -59,7 +59,7 @@ declare class ListComponent implements OnInit, ControlValueAccessor {
     /**
      * Custom value extractor function to extract the value of any object while writing values.
      */
-    readonly writeValueBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
+    readonly writeBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
     /**
      * A custom filter predicate function to filter items based on a search string.
      * Default checks if the item's string representation contains the filter string (case-insensitive).
@@ -112,7 +112,7 @@ declare class ListComponent implements OnInit, ControlValueAccessor {
     private _listenToDataSourceChanges;
     private _insertItems;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showIndicator": { "alias": "showIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeValueBy": { "alias": "writeValueBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, {}, ["_itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showIndicator": { "alias": "showIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, {}, ["_itemTemplate"], never, true, never>;
 }
 
 /**

package/components/select/index.d.ts

@@ -1,28 +1,21 @@
+import * as _bootkit_ng0_common from '@bootkit/ng0/common';
+import { SelectOption } from '@bootkit/ng0/common';
 import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
 import * as _bootkit_ng0_data from '@bootkit/ng0/data';
 import { DataSource, DataSourceLike, FilterPredicate } from '@bootkit/ng0/data';
 import * as _angular_core from '@angular/core';
-import { OnInit, ElementRef, TemplateRef, Renderer2, DestroyRef } from '@angular/core';
+import { OnInit, TemplateRef, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FlexibleConnectedPositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
-import { SelectOption } from '@bootkit/ng0/common';
 
 /**
  * Select component that allows users to choose an option from a dropdown list.
  */
 declare class SelectComponent implements OnInit, ControlValueAccessor {
-    protected _el: ElementRef<HTMLDivElement>;
-    private _renderer;
-    private _destroyRef;
-    private _viewportRuler;
-    private _overlay;
-    private _document;
-    private _ls;
-    private _changeDetector;
     private _resizeObserver?;
     private _resizeObserverInitialized;
     private _viewpoerRulerSubscription?;
-    protected _value: _angular_core.WritableSignal<any>;
+    protected _cdkListboxValue: _angular_core.WritableSignal<any>;
     private _filterElementRef?;
     private _onChangeCallback;
     private _onTouchedCallback;
@@ -33,6 +26,14 @@ declare class SelectComponent implements OnInit, ControlValueAccessor {
     protected _optionTemplate?: TemplateRef<any>;
     protected _positionStrategy: FlexibleConnectedPositionStrategy;
     protected _scrollStrategy: ScrollStrategy;
+    private _overlay;
+    private _document;
+    private _ls;
+    private _destroyRef;
+    protected _el: ElementRef<any>;
+    private _renderer;
+    private _viewportRuler;
+    private _changeDetector;
     /**
      * The data source for the select component.
      * This can be an array of data, a function that returns an observable of data,
@@ -40,22 +41,26 @@ declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     readonly source: _angular_core.InputSignalWithTransform<DataSource<any>, DataSourceLike<any>>;
     /**
-     * Indicates whether the dropdown is open or closed.
+     * Indicates whether multi selection is enabled or not.
      */
-    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Custom compare function to determine equality between two items.
-     * Default is a simple equality check.
+     * Indicates whether the dropdown is open or closed.
      */
+    readonly open: _angular_core.ModelSignal<boolean>;
     /**
-     * Custom value extractor function to extract the value of any object.
-     */
-    readonly extractBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
+    * A custom comparer function or the name of a field for comparing two objects.
+    */
+    readonly compareBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.BooleanValueComparer, _bootkit_ng0_data.BooleanValueComparerLike>;
     /**
      * Custom format function to convert an item to a string for display.
      * Default converts the item to a string using its toString method.
      */
     readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ValueFormatterFunction, _bootkit_ng0_localization.ValueFormatterLike>;
+    /**
+     * Custom value extractor function to extract the value of any object while writing values.
+     */
+    readonly writeBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
     /**
      * Indicates whether the dropdown is filterable.
      */
@@ -69,27 +74,18 @@ declare class SelectComponent implements OnInit, ControlValueAccessor {
      * Default checks if the item contains the filter value (case-insensitive).
      */
     readonly filterBy: _angular_core.InputSignal<FilterPredicate>;
-    constructor(_el: ElementRef<HTMLDivElement>, _renderer: Renderer2, _destroyRef: DestroyRef);
+    /**
+     * CSS class or classes to apply to the list container.
+     */
+    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter, _bootkit_ng0_common.CssClassLike>;
+    constructor();
     ngOnInit(): void;
+    private _loadItems;
     private _handleDataSourceChange;
     /**
      * Selects an option by index
      */
     protected _selectByIndex(index: number): void;
-    isSelected(value: any): boolean;
-    /**
-     * Sets an option as active
-     */
-    active(index: number): void;
-    /**
-     * Scrolls the item at the specified index into view within the dropdown list.
-     * @param index The index of the item to scroll into view.
-     * @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.
-     */
-    scrollItemIntoView(index: number, position?: ScrollLogicalPosition, behavior?: ScrollBehavior): void;
     protected _insertOptions(index?: number, ...items: any[]): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
@@ -105,7 +101,7 @@ declare class SelectComponent implements OnInit, ControlValueAccessor {
     private _unlistenFromResizeEvents;
     private _onHostClick;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ng0-select", ["ng0Select"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "extractBy": { "alias": "extractBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["_optionTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ng0-select", ["ng0Select"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["_optionTemplate"], never, true, never>;
 }
 
 /**

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

@@ -0,0 +1,302 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, booleanAttribute, HostListener, inject, Renderer2, ElementRef, model, computed, ViewChild, ContentChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+class DropdownDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: DropdownDividerComponent, isStandalone: true, selector: "ng0-dropdown-divider", exportAs: ["ng0DropdownDivider"], ngImport: i0, template: `<hr class="dropdown-divider">`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng0-dropdown-divider',
+                    exportAs: 'ng0DropdownDivider',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                    ],
+                    template: `<hr class="dropdown-divider">`,
+                }]
+        }] });
+
+/**
+ * An item within a dropdown menu.
+ */
+class DropdownItemComponent {
+    /**
+     * The CSS classes to apply to the dropdown item.
+     * */
+    cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
+    /**
+     * Whether the dropdown item is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    _onClick(e) {
+        if (this.disabled()) {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: DropdownItemComponent, isStandalone: true, selector: "ng0-dropdown-item", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)" } }, exportAs: ["ng0DropdownItem"], ngImport: i0, template: "<button class=\"dropdown-item\" [ngClass]=\"cssClass()\" [class.disabled]=\"disabled()\" [attr.aria-disabled]=\"disabled()\">\r\n    <ng-content></ng-content>\r\n</button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-dropdown-item', exportAs: 'ng0DropdownItem', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        RouterModule
+                    ], template: "<button class=\"dropdown-item\" [ngClass]=\"cssClass()\" [class.disabled]=\"disabled()\" [attr.aria-disabled]=\"disabled()\">\r\n    <ng-content></ng-content>\r\n</button>" }]
+        }], propDecorators: { _onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class DropdownMenuComponent {
+    _renderer = inject(Renderer2);
+    _dropdown = inject(DropdownComponent);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this._renderer.addClass(this.elementRef.nativeElement, 'dropdown-menu');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: DropdownMenuComponent, isStandalone: true, selector: "ng0-dropdown-menu", exportAs: ["ng0Dropdownmenu"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-dropdown-menu', exportAs: 'ng0Dropdownmenu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                    ], template: `<ng-content></ng-content>`, styles: [":host{display:block;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
+
+class DropdownComponent {
+    // @ContentChildren(DropdownItemComponent) private _items!: QueryList<DropdownItemComponent>;
+    _dropdownMenu;
+    _mainButton;
+    _splitButton;
+    // protected _scrollStrategy!: ScrollStrategy;
+    _el = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    /**
+     * The placement of the dropdown menu in relation to the dropdown toggle.
+     */
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /**
+     * The CSS classes to apply to the dropdown toggle button.
+     * @default 'btn btn-primary'
+     */
+    cssClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
+    /**
+     * The CSS classes to apply to the dropdown split button.
+     * @default 'btn btn-primary'
+     */
+    splitCssClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "splitCssClass" }] : []));
+    /**
+     * Indicates whether the dropdown is open or closed.
+     * @default false
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * Indicates whether the dropdown is a split button.
+     * A split button dropdown has a separate toggle button.
+     * @default false
+     */
+    split = input(false, ...(ngDevMode ? [{ debugName: "split", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Indicates whether the dropdown has an automatic close behavior.
+     * @default 'default'
+     */
+    autoClose = input('default', ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
+    /**
+     * Dropdown size
+     * @default 'default'
+     */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    _directionCssClass = computed(() => {
+        switch (this.placement()) {
+            case 'top':
+                return 'dropup';
+            case 'start':
+                return 'dropstart';
+            case 'end':
+                return 'dropend';
+            case 'bottom':
+            default:
+                return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "_directionCssClass" }] : []));
+    constructor() {
+        this._renderer.addClass(this._el.nativeElement, 'btn-group');
+        // this._scrollStrategy = this._overlay.scrollStrategies.block();
+    }
+    /**
+     * Toggle the dropdown open or closed.
+     */
+    toggle() {
+        this.open.set(!this.open());
+    }
+    _onDocumentClick(e) {
+        const splitButtonClicked = e.target === this._splitButton?.nativeElement;
+        const mainButtonClicked = e.target === this._mainButton?.nativeElement;
+        const toggleClicked = this.split() ? splitButtonClicked : mainButtonClicked;
+        const dropdownClicked = splitButtonClicked || mainButtonClicked;
+        const menuClicked = this._dropdownMenu.elementRef.nativeElement.contains(e.target);
+        const outsideClicked = !dropdownClicked && !menuClicked;
+        if (this.open()) {
+            if (toggleClicked) {
+                this.open.set(false);
+                return;
+            }
+            switch (this.autoClose()) {
+                case 'default':
+                    this.open.set(false);
+                    break;
+                case 'outside':
+                    if (outsideClicked || mainButtonClicked) {
+                        this.open.set(false);
+                    }
+                    break;
+                case 'inside':
+                    if (menuClicked) {
+                        this.open.set(false);
+                    }
+                    break;
+                case 'manual':
+                    break;
+            }
+        }
+        else {
+            if (toggleClicked) {
+                this.open.set(true);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropdownComponent, isStandalone: true, selector: "ng0-dropdown", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, splitCssClass: { classPropertyName: "splitCssClass", publicName: "splitCssClass", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:click": "_onDocumentClick($event)" }, properties: { "class": "_directionCssClass()" } }, queries: [{ propertyName: "_dropdownMenu", first: true, predicate: DropdownMenuComponent, descendants: true }], viewQueries: [{ propertyName: "_mainButton", first: true, predicate: ["mainButton"], descendants: true }, { propertyName: "_splitButton", first: true, predicate: ["splitButton"], descendants: true }], exportAs: ["ng0Dropdown"], ngImport: i0, template: "<button #mainButton\r\n        [class]=\"cssClass()\"\r\n        [class.dropdown-toggle]=\"!split()\"\r\n        [class.btn-sm]=\"size() == 'small'\"\r\n        [class.btn-lg]=\"size() == 'large'\"\r\n        type=\"button\">\r\n    <ng-content></ng-content>\r\n</button>\r\n\r\n@if(split()) {\r\n<button #splitButton\r\n        type=\"button\"\r\n        [class]=\"splitCssClass()\"\r\n        [class.btn-sm]=\"size() == 'small'\"\r\n        [class.btn-lg]=\"size() == 'large'\"\r\n        class=\"dropdown-toggle dropdown-toggle-split\">\r\n    <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n</button>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\">\r\n    <ng-content select=\"ng0-dropdown-menu\"></ng-content>\r\n</ng-template>\r\n\r\n<style>\r\n    :host {\r\n        display: inline-block;\r\n    }\r\n</style>", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-dropdown', exportAs: 'ng0Dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        OverlayModule,
+                    ], host: {
+                        '[class]': '_directionCssClass()',
+                    }, template: "<button #mainButton\r\n        [class]=\"cssClass()\"\r\n        [class.dropdown-toggle]=\"!split()\"\r\n        [class.btn-sm]=\"size() == 'small'\"\r\n        [class.btn-lg]=\"size() == 'large'\"\r\n        type=\"button\">\r\n    <ng-content></ng-content>\r\n</button>\r\n\r\n@if(split()) {\r\n<button #splitButton\r\n        type=\"button\"\r\n        [class]=\"splitCssClass()\"\r\n        [class.btn-sm]=\"size() == 'small'\"\r\n        [class.btn-lg]=\"size() == 'large'\"\r\n        class=\"dropdown-toggle dropdown-toggle-split\">\r\n    <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n</button>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\">\r\n    <ng-content select=\"ng0-dropdown-menu\"></ng-content>\r\n</ng-template>\r\n\r\n<style>\r\n    :host {\r\n        display: inline-block;\r\n    }\r\n</style>" }]
+        }], ctorParameters: () => [], propDecorators: { _dropdownMenu: [{
+                type: ContentChild,
+                args: [DropdownMenuComponent]
+            }], _mainButton: [{
+                type: ViewChild,
+                args: ['mainButton']
+            }], _splitButton: [{
+                type: ViewChild,
+                args: ['splitButton']
+            }], _onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DropdownHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: DropdownHeaderComponent, isStandalone: true, selector: "ng0-dropdown-header", exportAs: ["ng0DropdownItem"], ngImport: i0, template: `<h6 class="dropdown-header"><ng-content></ng-content></h6>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng0-dropdown-header',
+                    exportAs: 'ng0DropdownItem',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<h6 class="dropdown-header"><ng-content></ng-content></h6>`,
+                }]
+        }] });
+
+/**
+ * A link item within a dropdown menu.
+ * This component is used to create a navigable link inside a dropdown.
+ */
+class DropdownLinkComponent {
+    /**
+     * The link or URL to navigate to when the dropdown item is clicked.
+     */
+    link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
+    /**
+     * The router link active class to apply when the link is active.
+     */
+    active = input('', ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /**
+     * Specifies where to open the linked document.
+     */
+    target = input(undefined, ...(ngDevMode ? [{ debugName: "target" }] : []));
+    /**
+     * Whether the dropdown link is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    _onClick(e) {
+        if (this.disabled()) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: DropdownLinkComponent, isStandalone: true, selector: "ng0-dropdown-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)" } }, exportAs: ["ng0DropdownLink"], ngImport: i0, template: "<a class=\"dropdown-item\" [routerLink]=\"link()\" [target]=\"target()\" [routerLinkActive]=\"active()\" [class.disabled]=\"disabled()\" [attr.aria-disabled]=\"disabled()\">\r\n    <ng-content></ng-content>\r\n</a>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-dropdown-link', exportAs: 'ng0DropdownLink', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        RouterModule
+                    ], template: "<a class=\"dropdown-item\" [routerLink]=\"link()\" [target]=\"target()\" [routerLinkActive]=\"active()\" [class.disabled]=\"disabled()\" [attr.aria-disabled]=\"disabled()\">\r\n    <ng-content></ng-content>\r\n</a>" }]
+        }], propDecorators: { _onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+const Items = [
+    DropdownComponent,
+    DropdownMenuComponent,
+    DropdownItemComponent,
+    DropdownLinkComponent,
+    DropdownHeaderComponent,
+    DropdownDividerComponent
+];
+class DropdownModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: DropdownModule, imports: [DropdownComponent,
+            DropdownMenuComponent,
+            DropdownItemComponent,
+            DropdownLinkComponent,
+            DropdownHeaderComponent,
+            DropdownDividerComponent], exports: [DropdownComponent,
+            DropdownMenuComponent,
+            DropdownItemComponent,
+            DropdownLinkComponent,
+            DropdownHeaderComponent,
+            DropdownDividerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownModule, imports: [DropdownComponent,
+            DropdownMenuComponent,
+            DropdownItemComponent,
+            DropdownLinkComponent,
+            DropdownDividerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: Items,
+                    exports: Items
+                }]
+        }] });
+
+// export type DropdownToggleTriggerMode = 'click' | 'hover' | 'focus';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, DropdownDividerComponent, DropdownHeaderComponent, DropdownItemComponent, DropdownLinkComponent, DropdownMenuComponent, DropdownModule };
+//# sourceMappingURL=bootkit-ng0-components-dropdown.mjs.map