@elderbyte/ngx-starter 20.8.2 → 20.9.0-beta.0

package/index.d.ts

@@ -65,12 +65,12 @@ import * as i5$1 from '@angular/material/select';
 import * as i10$2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i12$1 from '@angular/material/progress-spinner';
+import * as i2$6 from '@angular/cdk/overlay';
+import { ConnectedPosition, Overlay, OverlayPositionBuilder, FlexibleConnectedPositionStrategyOrigin, PositionStrategy, OverlaySizeConfig } from '@angular/cdk/overlay';
 import * as i3$4 from '@angular/material/sidenav';
 import { MatDrawer, MatSidenav } from '@angular/material/sidenav';
 import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepicker, MatDatepickerInputEvent, DateRange, MatCalendarCellClassFunction, MatCalendar } from '@angular/material/datepicker';
-import * as i2$6 from '@angular/cdk/overlay';
-import { Overlay, OverlayPositionBuilder, FlexibleConnectedPositionStrategyOrigin, PositionStrategy, OverlaySizeConfig } from '@angular/cdk/overlay';
 import * as _elderbyte_ngx_starter from '@elderbyte/ngx-starter';
 import * as i2$8 from '@angular/material/expansion';
 import { MatTab, MatTabGroup } from '@angular/material/tabs';
@@ -13468,7 +13468,9 @@ declare class ElderNavLinkComponent {
 
 declare class ElderNavGroupComponent {
     private readonly navList;
-    private readonly children;
+    private readonly railNav;
+    protected readonly children: i0.Signal<readonly ElderNavLinkComponent[]>;
+    protected readonly overlayPositions: ConnectedPosition[];
     /***************************************************************************
      *                                                                         *
      * State                                                                   *
@@ -13480,6 +13482,7 @@ declare class ElderNavGroupComponent {
      * Computed                                                                *
      *                                                                         *
      **************************************************************************/
+    readonly isRailNav: i0.Signal<boolean>;
     readonly isOpen: i0.Signal<boolean>;
     readonly isActive: i0.Signal<boolean>;
     /***************************************************************************
@@ -13494,6 +13497,7 @@ declare class ElderNavGroupComponent {
      *                                                                         *
      **************************************************************************/
     toggle(): void;
+    close(): void;
     /***************************************************************************
      *                                                                         *
      * Event Handlers                                                          *
@@ -13501,6 +13505,7 @@ declare class ElderNavGroupComponent {
      **************************************************************************/
     protected onItemClicked(event: MouseEvent): void;
     protected onItemKeyDown(event: KeyboardEvent): void;
+    protected onOverlayContentClicked(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderNavGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderNavGroupComponent, "elder-nav-group", never, {}, {}, ["children"], ["*", "elder-nav-link"], true, never>;
 }
@@ -13614,6 +13619,12 @@ declare class ElderBreadCrumbsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderBreadCrumbsModule>;
 }
 
+declare class ElderRailNavDirective {
+    readonly elderRailNav = true;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderRailNavDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderRailNavDirective, "[elderRailNav]", never, {}, {}, never, never, true, never>;
+}
+
 declare class ElderRouterOutletService {
     private router;
     /***************************************************************************
@@ -18178,5 +18189,5 @@ declare class KafentModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KafentModule>;
 }
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRailNavDirective, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
 export type { ChipAvatarSpec, ChipColorSpec, ComparatorFn, ConfirmDeleteOptions, CountryPhoneFormat, CurrencyIndication, DataViewMessageType, ElderActivationOptions, ElderApplyControlFn, ElderAutoActivateItem, ElderAutoActivationMode, ElderDataViewInteractionMode, ElderLocalizedInputOptions, ElderMasterDetailMode, ElderNamedColor, ElderNamedColorRole, ElderSize, ElderToolbarContentSlot, EventSourceRequestInit, ExceptionDetail, Focusable, GenericMatcherOptions, IAuditedEntity, IContinuableDataSource, IContinuationFetcher, IDataContext, IDataContextActivePage, IDataContextContinuable, IDataSource, IDynamicValidationMessage, IElderDataView, IElderDetailDialogOptions, IElderEntityValueAccessor, IElderMultiEntityValueAccessor, IFileUploadClient, IFrameParams, IFrameStateType, IListDataSource, IListFetcher, IMasterDetailActivationOptions, IPageFetcher, IPagedDataSource, ISelectionModelDialogOptions, IStandardErrorDetail, ISuggestionProvider, ITranslated, ITranslatedText, ITranslationResource, IdExtractor, IncludeExcludeCycleStrategy, InputValue, IsoDateStr, IsoDurationStr, IsoIntervalStr, JsonMap, KafentConsumerEventRequest, KafentEventFilter, KafentEventRequestBase, KafentLiveEventRequest, KeyGetterFn, LanguageTag, LocalDataFilterFn, LocalDataSortFn, LocaleMap, LocalisationPicker, Localized, LockWarningOptions, MatchOptions, ObservedElementDimension, PageDto, PhoneNumber, QuantityPipeOptions, ScrollDirection, SearchInput, SelectChipSpec, SelectOptionChipSpec, SelectionOptions, ShellContentSlot, SortDirection, TextResolverFn$1 as TextResolverFn, Toast, ToastErrorDetails, ToastOptions, TrailingSpec, UnitCode, ValueSpec };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "20.8.2",
+  "version": "20.9.0-beta.0",
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^21.0.0",
     "@angular/common": "^20.0.0 || ^21.0.0",

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss

@@ -13,14 +13,12 @@
   font-weight: 400;
   border-radius: var(--elder-border-radius-sm);
   cursor: pointer;
-}
 
-.nav-group-button {
   .mat-icon {
     height: 24px;
     width: 24px;
     font-size: 24px;
-    padding: 4px;
+    padding: 0 4px;
   }
 }
 
@@ -33,11 +31,29 @@
   transition: background-color 0.5s;
 }
 
-.nav-group-button-open {
-  padding-left: 11px !important; // -5 to counter border-left
+.nav-group .nav-group-button.nav-group-button-open {
+  padding-left: 11px;
 }
 
-.nav-group-button-active:not(.nav-group-button-open) {
+.nav-group .nav-group-button.nav-group-button-active:not(.nav-group-button-open) {
   background-color: var(--elder-nav-link-hover-color);
   color: var(--md-sys-color-primary);
 }
+
+.nav-group-in-overlay {
+  --elder-nav-item-height: 38px;
+  width: auto;
+  border: solid 1px var(--md-sys-color-outline-variant);
+  border-radius: 5px;
+  background: var(--md-sys-color-surface-container-lowest);
+  text-align: center;
+  padding: 4px 0;
+  margin: 0;
+  margin-left: 10px;
+  min-width: 280px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
+  overflow-y: auto;
+  .nav-group-items-container {
+    font-size: 14px;
+  }
+}

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss

@@ -22,7 +22,7 @@
 }
 
 .nav-link.nav-link-clickable:hover {
-  background-color: var(--elder-nav-link-hover-color) !important;
+  background-color: var(--elder-nav-link-hover-color);
 }
 
 .nav-link.nav-link-disabled {

package/src/lib/components/navigation/nav/nav-list/elder-nav-list.component.scss

@@ -3,6 +3,10 @@
   min-height: 0; // Scroll fix
 }
 
+.elder-nav-list-inner {
+  overflow-y: scroll;
+}
+
 .elder-nav-list-full {
   min-width: 120px;
 }

package/theming/abstracts/_elder-starter-theme.scss

@@ -18,14 +18,13 @@
 @use '../components/elder-table-theme' as elder-table;
 @use '../components/elder-scrollbar-theme' as elder-scrollbar;
 @use '../components/mat-badge-theme' as mat-badge;
-// Create a theme.
+@use '../components/elder-rail-nav-theme' as elder-rail-nav;
+
 @mixin starter-theme($theme) {
   $theme: elder-set-defaults-fn.validate-and-set-defaults($theme);
 
   // ATM we need to render this here, because first need to set defaults for form-field density
-  @include mat.form-field-density(
-    map.get($theme, elder, density, form-field)
-  ); // TODO: improve density setup
+  @include mat.form-field-density(map.get($theme, elder, density, form-field));
 
   // design tokens
   @include elder-design-tokens.elder-design-tokens();
@@ -49,4 +48,5 @@
   @include elder-table.theme($theme);
   @include elder-scrollbar.theme();
   @include mat-badge.theme();
+  @include elder-rail-nav.theme();
 }

package/theming/components/_elder-rail-nav-theme.scss

@@ -0,0 +1,124 @@
+@mixin theme {
+  .elder-rail-nav.elder-rail-nav {
+    --elder-rail-nav-font-size: 12px;
+    --elder-rail-nav-item-margin-bottom: 12px;
+    --elder-rail-nav-width: 80px;
+    --elder-rail-nav-padding-top: 12px;
+    --elder-rail-nav-padding-left: 6px;
+    --elder-rail-nav-padding-right: 2px;
+    --elder-rail-nav-item-side-padding: 1px;
+    --elder-rail-nav-icon-color: var(--md-sys-color-on-surface);
+    --elder-rail-nav-icon-size: 30px;
+    --elder-rail-nav-hover-bg: color-mix(
+      in srgb,
+      var(--mat-list-list-item-hover-state-layer-color) 12%,
+      transparent
+    );
+    --elder-rail-nav-active-hover-bg: color-mix(
+      in srgb,
+      var(--mat-list-list-item-hover-state-layer-color) 12%,
+      var(--mat-list-active-indicator-color)
+    );
+
+    // overwrite components existing variable
+    --elder-nav-link-active-color: var(--mat-list-active-indicator-color);
+
+    .elder-nav-list-full.elder-nav-list-full {
+      min-width: 0;
+      width: var(--elder-rail-nav-width);
+    }
+
+    .elder-nav-list.elder-nav-list {
+      padding-top: var(--elder-rail-nav-padding-top);
+      padding-left: var(--elder-rail-nav-padding-left);
+      padding-right: var(--elder-rail-nav-padding-right);
+    }
+
+    .elder-nav-list-inner.elder-nav-list-inner {
+      padding: 0;
+      overflow-y: auto;
+
+      .mat-divider.mat-divider {
+        display: none;
+      }
+    }
+
+    .elder-nav-group-button-content.elder-nav-group-button-content,
+    .nav-link-content.nav-link-content {
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: 0;
+    }
+
+    .nav-link.nav-link {
+      @include item-styles;
+
+      &.nav-link-active {
+        color: var(--md-sys-color-primary);
+      }
+      &.nav-link-clickable:hover {
+        background-color: var(--elder-rail-nav-hover-bg);
+      }
+      &.nav-link-clickable.nav-link-active:hover {
+        background-color: var(--elder-rail-nav-active-hover-bg);
+      }
+    }
+
+    .nav-group-button.nav-group-button {
+      &,
+      &.nav-group-button-open {
+        @include item-styles;
+      }
+      &.nav-group-button-active {
+        color: var(--elder-rail-nav-icon-color);
+      }
+      &.nav-group-button-active:not(:hover) {
+        background-color: var(--mat-list-active-indicator-color);
+      }
+      &.nav-group-button-active:hover {
+        background-color: var(--elder-rail-nav-active-hover-bg);
+      }
+      .mat-icon::after {
+        content: '›';
+        font-weight: bold;
+        font-size: 18px;
+        position: absolute;
+        right: 8px;
+        top: 10px;
+      }
+    }
+
+    /**
+     * mat-icon styles
+     */
+    mat-icon.mat-icon {
+      font-size: var(--elder-rail-nav-icon-size);
+      height: var(--elder-rail-nav-icon-size);
+      width: var(--elder-rail-nav-icon-size);
+      padding: 0;
+    }
+
+    .nav-group-button.nav-group-button:not(.nav-group-button-active),
+    .nav-link.nav-link:not(.nav-link-active) {
+      mat-icon.mat-icon {
+        color: var(--elder-rail-nav-icon-color);
+      }
+    }
+  }
+}
+
+@mixin item-styles {
+  text-align: center;
+  padding: 8px 0;
+  word-break: break-word;
+
+  font-size: var(--elder-rail-nav-font-size);
+  line-height: var(--elder-rail-nav-font-size);
+
+  padding-left: var(--elder-rail-nav-item-side-padding);
+  padding-right: var(--elder-rail-nav-item-side-padding);
+
+  margin-bottom: var(--elder-rail-nav-item-margin-bottom);
+
+  border-radius: 5px;
+}