@ng-solid/design-system 22.2.0 → 22.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-solid/design-system",
-  "version": "22.2.0",
+  "version": "22.2.2",
   "license": "MIT",
   "description": "Arvisfy, the token-driven Angular design system for ng-solid.",
   "author": "Ulises Familia Rodríguez <chicromedia@hotmail.com>",

package/types/ng-solid-design-system.d.ts

@@ -1,6 +1,6 @@
 import { DateValue, DayOfWeek } from '@internationalized/date';
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnInit, Type, AfterViewInit, OnDestroy, Signal, ComponentRef, AfterContentInit, OnChanges, SimpleChanges, TemplateRef, InjectionToken, EnvironmentProviders } from '@angular/core';
+import { ElementRef, OnInit, Type, AfterViewInit, OnDestroy, Signal, ComponentRef, OnChanges, SimpleChanges, TemplateRef, InjectionToken, EnvironmentProviders } from '@angular/core';
 import { FormGroup, ControlValueAccessor } from '@angular/forms';
 import { NsFile } from '@ng-solid/core';
 import { Subject } from 'rxjs';
@@ -589,6 +589,72 @@ declare class NsDateRangePickerComponent extends NsValueAccessor<NsDateRangeValu
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsDateRangePickerComponent, "ns-date-range-picker", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "unavailableDates": { "alias": "unavailableDates"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class NsDropdownItemDirective {
+    readonly key: _angular_core.InputSignal<NsKey>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsDropdownItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NsDropdownItemDirective, "ns-dropdown-item", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NsDropdownItem<T = unknown> {
+    key: NsKey;
+    label: string;
+    disabled?: boolean;
+    value?: T;
+}
+type NsDropdownValue = NsKey | readonly NsKey[] | null;
+
+interface NsDropdownWorkingItem {
+    readonly key: NsKey;
+    readonly label: string;
+    readonly disabled: boolean;
+}
+declare class NsDropdownComponent extends NsValueAccessor<NsDropdownValue> {
+    readonly collection: _angular_core.InputSignal<readonly NsDropdownItem<unknown>[]>;
+    readonly contentItems: _angular_core.Signal<readonly NsDropdownItemDirective[]>;
+    readonly selectionMode: _angular_core.InputSignal<NsSelectionMode>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly placement: _angular_core.InputSignal<NsPlacement>;
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private trigger?;
+    private menu?;
+    private searchInput?;
+    private listbox?;
+    private readonly overlay;
+    private readonly destroyRef;
+    private readonly typeahead;
+    private overlayRef?;
+    private destroyed;
+    readonly query: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly listboxId: string;
+    readonly searchId: string;
+    readonly skeletonRows: readonly [0, 1, 2, 3];
+    readonly items: _angular_core.Signal<NsDropdownWorkingItem[]>;
+    readonly visibleItems: _angular_core.Signal<NsDropdownWorkingItem[]>;
+    readonly selectedKeys: _angular_core.Signal<ReadonlySet<NsKey>>;
+    readonly selectedLabel: _angular_core.Signal<string>;
+    readonly activeId: _angular_core.Signal<string>;
+    constructor();
+    toggle(): void;
+    select(key: NsKey): void;
+    onNativeChange(event: Event): void;
+    onSearchInput(event: Event): void;
+    onTriggerKeydown(event: KeyboardEvent): void;
+    onSearchKeydown(event: KeyboardEvent): void;
+    onListboxKeydown(event: KeyboardEvent): void;
+    private show;
+    private close;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsDropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsDropdownComponent, "ns-dropdown", never, { "collection": { "alias": "collection"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, ["contentItems"], never, true, never>;
+}
+
 declare class NsInputComponent extends NsValueAccessor<string> {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsInputComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsInputComponent, "ns-input", never, {}, {}, never, never, true, never>;
@@ -799,34 +865,6 @@ declare class NsLinkComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsLinkComponent, "ns-link", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class NsListBoxOptionComponent {
-    readonly key: _angular_core.InputSignal<NsKey>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly selected: _angular_core.WritableSignal<boolean>;
-    readonly active: _angular_core.WritableSignal<boolean>;
-    readonly element: ElementRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsListBoxOptionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsListBoxOptionComponent, "ns-list-box-option", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class NsListBoxComponent implements AfterContentInit {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly selectionMode: _angular_core.InputSignal<NsSelectionMode>;
-    readonly selectedKeys: _angular_core.ModelSignal<readonly NsKey[]>;
-    readonly options: _angular_core.Signal<readonly NsListBoxOptionComponent[]>;
-    private readonly typeahead;
-    private activeIndex;
-    ngAfterContentInit(): void;
-    onClick(event: MouseEvent): void;
-    onKeydown(event: KeyboardEvent): void;
-    select(key: NsKey): void;
-    private optionFor;
-    private focus;
-    private syncState;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsListBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsListBoxComponent, "ns-list-box", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; }, { "selectedKeys": "selectedKeysChange"; }, ["options"], ["*"], true, never>;
-}
-
 declare class NsMeterComponent {
     readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -1071,45 +1109,6 @@ declare class NsSchemaMarkupComponent implements OnInit, OnChanges {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsSchemaMarkupComponent, "ns-schema", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class NsSelectorListItemComponent {
-    readonly key: _angular_core.InputSignal<NsKey>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly element: ElementRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsSelectorListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsSelectorListItemComponent, "ns-selector-list-item", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class NsSelectorListComponent extends NsValueAccessor<NsKey> {
-    readonly name: _angular_core.InputSignal<string>;
-    readonly placement: _angular_core.InputSignal<NsPlacement>;
-    readonly items: _angular_core.Signal<readonly NsSelectorListItemComponent[]>;
-    private trigger?;
-    private menu?;
-    private readonly overlay;
-    private readonly destroyRef;
-    private readonly typeahead;
-    private overlayRef?;
-    private activeIndex;
-    private destroyed;
-    readonly open: _angular_core.ModelSignal<boolean>;
-    readonly listboxId: string;
-    constructor();
-    get activeId(): string | undefined;
-    selectedLabel(): string | undefined;
-    toggle(): void;
-    select(key: NsKey): void;
-    selectNative(event: Event): void;
-    onKeydown(event: KeyboardEvent): void;
-    onMenuClick(event: MouseEvent): void;
-    private show;
-    private close;
-    private selectedIndex;
-    private syncSelection;
-    private readonly onMenuClickBound;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsSelectorListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsSelectorListComponent, "ns-selector-list", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["items"], ["*"], true, never>;
-}
-
 declare class NsSkeletonComponent {
     readonly width: _angular_core.InputSignal<string>;
     readonly height: _angular_core.InputSignal<string>;
@@ -1383,5 +1382,5 @@ declare class NsTooltipDirective implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NsTooltipDirective, "[nsTooltip]", never, { "message": { "alias": "nsTooltip"; "required": true; "isSignal": true; }; "placement": { "alias": "nsTooltipPlacement"; "required": false; "isSignal": true; }; "delay": { "alias": "nsTooltipDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsListBoxComponent, NsListBoxOptionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSelectorListComponent, NsSelectorListItemComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
-export type { NsAlertVariant, NsBadgeMode, NsButtonVariant, NsCollectionItem, NsColor, NsColorScheme, NsComment, NsComponentInputs, NsDateRangeValue, NsDateView, NsDeepPartial, NsDrawerComponentInputs, NsDrawerConfig, NsDrawerOptions, NsDrawerPosition, NsFlattenedPrimitiveTokens, NsKey, NsModalConfig, NsModalOptions, NsModalSize, NsOrientation, NsOverlayCloseReason, NsOverlayConfig, NsOverlayPosition, NsPlacement, NsPrimitiveReference, NsPrimitiveTokenValue, NsResolvedColorScheme, NsResolvedThemeOptions, NsResolvedToastThemeOptions, NsSchemaMarkup, NsSchemaType, NsSelectionMode, NsSemanticReference, NsSemanticTokens, NsSize, NsSliderValue, NsThemeOptions, NsThemePreset, NsThemePresetOverrides, NsToastAction, NsToastCloseReason, NsToastOptions, NsToastPlacement, NsToastThemeOptions, NsToastVariant, NsTokenTree, NsVariant };
+export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
+export type { NsAlertVariant, NsBadgeMode, NsButtonVariant, NsCollectionItem, NsColor, NsColorScheme, NsComment, NsComponentInputs, NsDateRangeValue, NsDateView, NsDeepPartial, NsDrawerComponentInputs, NsDrawerConfig, NsDrawerOptions, NsDrawerPosition, NsDropdownItem, NsDropdownValue, NsFlattenedPrimitiveTokens, NsKey, NsModalConfig, NsModalOptions, NsModalSize, NsOrientation, NsOverlayCloseReason, NsOverlayConfig, NsOverlayPosition, NsPlacement, NsPrimitiveReference, NsPrimitiveTokenValue, NsResolvedColorScheme, NsResolvedThemeOptions, NsResolvedToastThemeOptions, NsSchemaMarkup, NsSchemaType, NsSelectionMode, NsSemanticReference, NsSemanticTokens, NsSize, NsSliderValue, NsThemeOptions, NsThemePreset, NsThemePresetOverrides, NsToastAction, NsToastCloseReason, NsToastOptions, NsToastPlacement, NsToastThemeOptions, NsToastVariant, NsTokenTree, NsVariant };