@ethlete/cdk 4.2.2 → 4.3.1

package/lib/components/scrollable/components/scrollable/scrollable.component.d.ts

@@ -1,12 +1,15 @@
-import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
-import { CurrentElementVisibility, IsActiveElementDirective, IsElementDirective, NgClassType, ScrollObserverScrollState, ScrollToElementOptions, TypedQueryList } from '@ethlete/core';
+import { ElementRef, EventEmitter } from '@angular/core';
+import { NgClassType, ScrollObserverScrollState, ScrollToElementOptions, TypedQueryList } from '@ethlete/core';
+import { ScrollableIsActiveChildDirective } from '../../directives';
 import { ScrollableIntersectionChange, ScrollableScrollMode } from '../../types';
 import * as i0 from "@angular/core";
-export declare class ScrollableComponent implements AfterContentInit {
-    private readonly _destroy$;
+interface ScrollableNavigationItem {
+    isActive: boolean;
+    element: HTMLElement;
+}
+export declare class ScrollableComponent {
     private readonly _elementRef;
     private readonly _isCursorDragging$;
-    private readonly _latestVisibilityStates$;
     set _itemSize(v: 'auto' | 'same' | 'full');
     readonly itemSize: import("@angular/core").WritableSignal<"auto" | "same" | "full">;
     set _direction(v: 'horizontal' | 'vertical');
@@ -15,6 +18,8 @@ export declare class ScrollableComponent implements AfterContentInit {
     readonly scrollableRole: import("@angular/core").WritableSignal<string | null>;
     set _scrollableClass(v: NgClassType | null);
     readonly scrollableClass: import("@angular/core").WritableSignal<NgClassType>;
+    set _renderNavigation(v: boolean);
+    readonly renderNavigation: import("@angular/core").WritableSignal<boolean>;
     set _renderMasks(v: boolean);
     readonly renderMasks: import("@angular/core").WritableSignal<boolean>;
     set _renderButtons(v: boolean);
@@ -37,55 +42,55 @@ export declare class ScrollableComponent implements AfterContentInit {
     readonly intersectionChange: EventEmitter<ScrollableIntersectionChange[]>;
     private set _scrollable(value);
     readonly scrollable: import("@angular/core").WritableSignal<ElementRef<HTMLElement> | null>;
+    private set _scrollableContainer(value);
+    readonly scrollableContainer: import("@angular/core").WritableSignal<ElementRef<HTMLElement> | null>;
     private set _firstElement(value);
     readonly firstElement: import("@angular/core").WritableSignal<ElementRef<HTMLElement> | null>;
     private set _lastElement(value);
     readonly lastElement: import("@angular/core").WritableSignal<ElementRef<HTMLElement> | null>;
     private set _activeElementList(value);
-    readonly activeElementList: import("@angular/core").WritableSignal<TypedQueryList<IsActiveElementDirective> | null>;
-    private set _elementList(value);
-    readonly elementList: import("@angular/core").WritableSignal<TypedQueryList<IsElementDirective> | null>;
-    get highestVisibleIntersection(): ScrollableIntersectionChange | null;
-    get nextPartialIntersection(): ScrollableIntersectionChange | null;
-    get previousPartialIntersection(): ScrollableIntersectionChange | null;
-    protected readonly containerScrollState: import("@angular/core").Signal<{
-        canScroll: boolean;
-        canScrollHorizontally: boolean;
-        canScrollVertically: boolean;
-        scrollWidth: number | null;
-        scrollHeight: number | null;
-        elementDimensions: import("@ethlete/core").ElementDimensions;
-    }>;
-    protected readonly firstElementIntersection: import("@angular/core").WritableSignal<IntersectionObserverEntry | null>;
-    protected readonly firstElementVisibility: import("@angular/core").WritableSignal<CurrentElementVisibility | null>;
-    protected readonly lastElementIntersection: import("@angular/core").WritableSignal<IntersectionObserverEntry | null>;
-    protected readonly lastElementVisibility: import("@angular/core").WritableSignal<CurrentElementVisibility | null>;
-    protected readonly canScroll: import("@angular/core").Signal<boolean>;
-    protected readonly isAtStart: import("@angular/core").Signal<boolean>;
-    protected readonly isAtEnd: import("@angular/core").Signal<boolean>;
-    protected readonly enableOverlayAnimations: import("@angular/core").WritableSignal<boolean>;
-    protected readonly hostAttributes: {
+    readonly activeElementList: import("@angular/core").WritableSignal<TypedQueryList<ScrollableIsActiveChildDirective> | null>;
+    private readonly containerScrollState;
+    private readonly firstElementIntersection;
+    private readonly firstElementVisibility;
+    private readonly lastElementIntersection;
+    private readonly lastElementVisibility;
+    private readonly allScrollableChildren;
+    private readonly scrollableChildren;
+    private readonly _disableSnapping$;
+    private readonly scrollableContentIntersections;
+    private readonly scrollableContentIntersections$;
+    private readonly manualActiveNavigationIndex;
+    private readonly canScroll;
+    private readonly isAtStart;
+    private readonly isAtEnd;
+    private readonly enableOverlayAnimations;
+    private readonly _initialScrollableNavigation;
+    protected readonly scrollableNavigation: import("@angular/core").Signal<ScrollableNavigationItem[]>;
+    readonly hostAttributeBindings: {
         remove: (...tokens: string[]) => void;
         has: (token: string) => boolean;
     };
-    protected readonly hostClasses: {
+    readonly hostClassBindings: {
         remove: (...tokens: string[]) => void;
         has: (token: string) => boolean;
     };
     constructor();
-    ngAfterContentInit(): void;
     scrollOneContainerSize(direction: 'start' | 'end'): void;
     scrollOneItemSize(direction: 'start' | 'end'): void;
     scrollToElement(options: Omit<ScrollToElementOptions, 'container'>): void;
     scrollToElementByIndex(options: Omit<ScrollToElementOptions, 'container'> & {
         index: number;
     }): void;
+    protected scrollToElementViaNavigation(elementIndex: number, element: HTMLElement): void;
     protected setIsCursorDragging(isDragging: boolean): void;
     protected scrollToStartDirection(): void;
-    protected scrollToStartEnd(): void;
-    private _setupScrollListening;
+    protected scrollToEndDirection(): void;
+    private _enableSnapping;
+    private _disableSnapping;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ScrollableComponent, "et-scrollable", never, { "_itemSize": { "alias": "itemSize"; "required": false; }; "_direction": { "alias": "direction"; "required": false; }; "_scrollableRole": { "alias": "scrollableRole"; "required": false; }; "_scrollableClass": { "alias": "scrollableClass"; "required": false; }; "_renderMasks": { "alias": "renderMasks"; "required": false; }; "_renderButtons": { "alias": "renderButtons"; "required": false; }; "_renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; "_stickyButtons": { "alias": "stickyButtons"; "required": false; }; "_cursorDragScroll": { "alias": "cursorDragScroll"; "required": false; }; "_disableActiveElementScrolling": { "alias": "disableActiveElementScrolling"; "required": false; }; "_scrollMode": { "alias": "scrollMode"; "required": false; }; "_snap": { "alias": "snap"; "required": false; }; "_scrollMargin": { "alias": "scrollMargin"; "required": false; }; }, { "scrollStateChange": "scrollStateChange"; "intersectionChange": "intersectionChange"; }, ["_activeElementList", "_elementList"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScrollableComponent, "et-scrollable", never, { "_itemSize": { "alias": "itemSize"; "required": false; }; "_direction": { "alias": "direction"; "required": false; }; "_scrollableRole": { "alias": "scrollableRole"; "required": false; }; "_scrollableClass": { "alias": "scrollableClass"; "required": false; }; "_renderNavigation": { "alias": "renderNavigation"; "required": false; }; "_renderMasks": { "alias": "renderMasks"; "required": false; }; "_renderButtons": { "alias": "renderButtons"; "required": false; }; "_renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; "_stickyButtons": { "alias": "stickyButtons"; "required": false; }; "_cursorDragScroll": { "alias": "cursorDragScroll"; "required": false; }; "_disableActiveElementScrolling": { "alias": "disableActiveElementScrolling"; "required": false; }; "_scrollMode": { "alias": "scrollMode"; "required": false; }; "_snap": { "alias": "snap"; "required": false; }; "_scrollMargin": { "alias": "scrollMargin"; "required": false; }; }, { "scrollStateChange": "scrollStateChange"; "intersectionChange": "intersectionChange"; }, ["_activeElementList"], ["*"], true, never>;
+    static ngAcceptInputType__renderNavigation: unknown;
     static ngAcceptInputType__renderMasks: unknown;
     static ngAcceptInputType__renderButtons: unknown;
     static ngAcceptInputType__renderScrollbars: unknown;
@@ -95,3 +100,4 @@ export declare class ScrollableComponent implements AfterContentInit {
     static ngAcceptInputType__snap: unknown;
     static ngAcceptInputType__scrollMargin: unknown;
 }
+export {};

package/lib/components/scrollable/directives/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/lib/components/scrollable/directives/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './scrollable-ignore-child/public-api';
+export * from './scrollable-is-active-child/public-api';

package/lib/components/scrollable/directives/scrollable-ignore-child/public-api.d.ts

@@ -0,0 +1 @@
+export * from './scrollable-ignore-child.directive';

package/lib/components/scrollable/directives/scrollable-ignore-child/scrollable-ignore-child.directive.d.ts

@@ -0,0 +1,16 @@
+import { InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare const SCROLLABLE_IGNORE_CHILD_TOKEN: InjectionToken<ScrollableIgnoreChildDirective>;
+export declare const SCROLLABLE_IGNORE_CHILD_ATTRIBUTE = "etScrollableIgnoreChild";
+export declare const isScrollableChildIgnored: (e: HTMLElement) => boolean;
+export declare class ScrollableIgnoreChildDirective {
+    set _ignoreChildEnabled(v: boolean);
+    readonly ignoreChildEnabled: import("@angular/core").WritableSignal<boolean>;
+    readonly hostAttributeBindings: {
+        remove: (...tokens: string[]) => void;
+        has: (token: string) => boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableIgnoreChildDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollableIgnoreChildDirective, "[etScrollableIgnoreChild]", never, { "_ignoreChildEnabled": { "alias": "etScrollableIgnoreChild"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType__ignoreChildEnabled: unknown;
+}

package/lib/components/scrollable/directives/scrollable-is-active-child/public-api.d.ts

@@ -0,0 +1 @@
+export * from './scrollable-is-active-child.directive';

package/lib/components/scrollable/directives/scrollable-is-active-child/scrollable-is-active-child.directive.d.ts

@@ -0,0 +1,17 @@
+import { ElementRef, InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare const SCROLLABLE_IS_ACTIVE_CHILD_TOKEN: InjectionToken<ScrollableIsActiveChildDirective>;
+export declare const SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE = "etScrollableIsActiveChild";
+export declare const isScrollableChildActive: (e: HTMLElement) => boolean;
+export declare class ScrollableIsActiveChildDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    set _isActiveChildEnabled(v: boolean);
+    readonly isActiveChildEnabled: import("@angular/core").WritableSignal<boolean>;
+    readonly hostAttributeBindings: {
+        remove: (...tokens: string[]) => void;
+        has: (token: string) => boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableIsActiveChildDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollableIsActiveChildDirective, "[etScrollableIsActiveChild]", never, { "_isActiveChildEnabled": { "alias": "etScrollableIsActiveChild"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType__isActiveChildEnabled: unknown;
+}

package/lib/components/scrollable/public-api.d.ts

@@ -1,3 +1,4 @@
 export * from './components/public-api';
+export * from './directives/public-api';
 export * from './scrollable.imports';
 export * from './types/public-api';

package/lib/components/scrollable/scrollable.imports.d.ts

@@ -1,3 +1,3 @@
-import { IsActiveElementDirective, IsElementDirective, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective } from '@ethlete/core';
 import { ScrollableComponent } from './components';
-export declare const ScrollableImports: readonly [typeof ScrollableComponent, typeof IsElementDirective, typeof IsActiveElementDirective, typeof ScrollObserverFirstElementDirective, typeof ScrollObserverLastElementDirective, typeof ScrollObserverIgnoreTargetDirective];
+import { ScrollableIgnoreChildDirective, ScrollableIsActiveChildDirective } from './directives';
+export declare const ScrollableImports: readonly [typeof ScrollableComponent, typeof ScrollableIsActiveChildDirective, typeof ScrollableIgnoreChildDirective];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "exports": {
     ".": {
       "css": "./src/lib/styles/index.css",
@@ -14,13 +14,13 @@
     }
   },
   "peerDependencies": {
-    "@angular/animations": "17.0.2",
+    "@angular/animations": "17.0.3",
     "@angular/cdk": "17.0.0",
-    "@angular/common": "17.0.2",
-    "@angular/core": "17.0.2",
-    "@angular/forms": "17.0.2",
-    "@angular/platform-browser": "17.0.2",
-    "@angular/router": "17.0.2",
+    "@angular/common": "17.0.3",
+    "@angular/core": "17.0.3",
+    "@angular/forms": "17.0.3",
+    "@angular/platform-browser": "17.0.3",
+    "@angular/router": "17.0.3",
     "@ethlete/core": "^4.0.3",
     "@ethlete/query": "^5.0.3",
     "@ethlete/theming": "^2.3.1",