@ethlete/cdk 4.19.5 → 4.20.0

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

@@ -5,8 +5,11 @@ import { ScrollableIntersectionChange, ScrollableScrollMode } from '../../types'
 import * as i0 from "@angular/core";
 interface ScrollableNavigationItem {
     isActive: boolean;
+    activeOffset: number;
     element: HTMLElement;
 }
+export type ScrollableButtonPosition = 'inside' | 'footer';
+export type ScrollableScrollOrigin = 'auto' | 'center' | 'start' | 'end';
 export declare class ScrollableComponent {
     private readonly _elementRef;
     private readonly _isCursorDragging$;
@@ -24,6 +27,10 @@ export declare class ScrollableComponent {
     readonly renderMasks: import("@angular/core").WritableSignal<boolean>;
     set _renderButtons(v: boolean);
     readonly renderButtons: import("@angular/core").WritableSignal<boolean>;
+    renderButtonsInside: import("@angular/core").Signal<boolean>;
+    renderButtonsInFooter: import("@angular/core").Signal<boolean>;
+    set _buttonPosition(v: ScrollableButtonPosition);
+    readonly buttonPosition: import("@angular/core").WritableSignal<ScrollableButtonPosition>;
     set _renderScrollbars(v: boolean);
     readonly renderScrollbars: import("@angular/core").WritableSignal<boolean>;
     set _stickyButtons(v: boolean);
@@ -38,6 +45,8 @@ export declare class ScrollableComponent {
     readonly snap: import("@angular/core").WritableSignal<boolean>;
     set _scrollMargin(v: number);
     readonly scrollMargin: import("@angular/core").WritableSignal<number>;
+    set _scrollOrigin(v: ScrollableScrollOrigin);
+    readonly scrollOrigin: import("@angular/core").WritableSignal<ScrollableScrollOrigin>;
     readonly scrollStateChange: EventEmitter<ScrollObserverScrollState>;
     readonly intersectionChange: EventEmitter<ScrollableIntersectionChange[]>;
     private set _scrollable(value);
@@ -50,6 +59,9 @@ export declare class ScrollableComponent {
     readonly lastElement: import("@angular/core").WritableSignal<ElementRef<HTMLElement> | null>;
     private set _activeElementList(value);
     readonly activeElementList: import("@angular/core").WritableSignal<TypedQueryList<ScrollableIsActiveChildDirective> | null>;
+    navigationDotsContainer: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
+    firstNavigationDot: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>;
+    navigationDotDimensions: import("@angular/core").Signal<import("@ethlete/core").ElementDimensions>;
     private readonly containerScrollState;
     private readonly firstElementIntersection;
     private readonly firstElementVisibility;
@@ -69,6 +81,7 @@ export declare class ScrollableComponent {
     private readonly enableOverlayAnimations;
     private readonly _initialScrollableNavigation;
     protected readonly scrollableNavigation: import("@angular/core").Signal<ScrollableNavigationItem[]>;
+    private readonly activeIndex;
     readonly hostAttributeBindings: {
         remove: (...tokens: string[]) => void;
         removeMany: (tokens: string[]) => void;
@@ -91,20 +104,24 @@ export declare class ScrollableComponent {
         pushMany: (map: Record<string, import("@angular/core").Signal<unknown>>) => void;
     };
     constructor();
+    getNavigationDotsContainerTranslate(navigationDotCount: number, activeIndex: number): string;
     scrollOneContainerSize(direction: 'start' | 'end'): void;
     scrollOneItemSize(direction: 'start' | 'end'): void;
-    scrollToElement(options: Omit<ScrollToElementOptions, 'container'>): void;
+    scrollToElement(options: Omit<ScrollToElementOptions, 'container'> & {
+        ignoreForcedOrigin?: boolean;
+    }): void;
     scrollToElementByIndex(options: Omit<ScrollToElementOptions, 'container'> & {
         index: number;
+        ignoreForcedOrigin?: boolean;
     }): void;
-    protected scrollToElementViaNavigation(elementIndex: number, element: HTMLElement): void;
+    protected scrollToElementViaNavigation(elementIndex: number): void;
     protected setIsCursorDragging(isDragging: boolean): void;
     protected scrollToStartDirection(): void;
     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; }; "_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 ɵ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; }; "_buttonPosition": { "alias": "buttonPosition"; "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; }; "_scrollOrigin": { "alias": "scrollOrigin"; "required": false; }; }, { "scrollStateChange": "scrollStateChange"; "intersectionChange": "intersectionChange"; }, ["_activeElementList"], ["*"], true, never>;
     static ngAcceptInputType__renderNavigation: unknown;
     static ngAcceptInputType__renderMasks: unknown;
     static ngAcceptInputType__renderButtons: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.19.5",
+  "version": "4.20.0",
   "exports": {
     ".": {
       "css": "./src/lib/styles/index.css",
@@ -15,7 +15,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "17.3.5",
-    "@angular/cdk": "17.3.5",
+    "@angular/cdk": "17.3.6",
     "@angular/common": "17.3.5",
     "@angular/core": "17.3.5",
     "@angular/forms": "17.3.5",

package/src/lib/styles/cdk.css

@@ -8,11 +8,6 @@
   grid-template-columns: minmax(0, 1fr);
 }
 
-div.cdk-global-overlay-wrapper {
-  /* The backdrop has the same z-index as the overlay itself. This sometimes causes the backdrop to be on top of the overlay in Firefox/Safari */
-  z-index: 1001;
-}
-
 .et-force-invisible {
   opacity: 0 !important;
 }