@ethlete/cdk 4.30.0 → 4.32.0

package/lib/components/overlay/components/overlay/types/overlay.types.d.ts

@@ -2,6 +2,7 @@ import { Direction } from '@angular/cdk/bidi';
 import { PositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import { Injector, StaticProvider, ViewContainerRef } from '@angular/core';
 import { Breakpoint } from '@ethlete/core';
+import { EmptyObject } from '@ethlete/query';
 /** Options for where to set focus to automatically on overlay open */
 export type OverlayAutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
 /** Valid ARIA roles for a overlay element. */
@@ -194,3 +195,11 @@ export interface OverlayConfig<D = unknown> {
      */
     origin?: HTMLElement | MouseEvent | TouchEvent | KeyboardEvent | PointerEvent;
 }
+/**
+ * Configuration utility type for overlays.
+ * To be used inside your overlay opener method as a param to be passed to the overlay.open method.
+ */
+export type OverlayConsumerConfig<D = void> = Omit<OverlayConfig<D>, 'positions' | 'data'> & MaybeOverlayConsumerConfigWithData<D>;
+export type MaybeOverlayConsumerConfigWithData<D> = D extends void ? EmptyObject : {
+    data: D;
+};

package/lib/components/overlay/components/overlay/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './filter-overlay';
 export * from './overlay-config';
+export * from './overlay-handler';
 export * from './overlay-position-builder';
 export * from './overlay-ref';
 export * from './overlay-router';

package/lib/components/overlay/components/overlay/utils/overlay-handler.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType } from '@angular/cdk/overlay';
+import { TemplateRef } from '@angular/core';
+import { OverlayBreakpointConfigEntry, OverlayConfig, OverlayConsumerConfig } from '../types';
+import { OverlayPositionBuilder } from './overlay-position-builder';
+import { OverlayRef } from './overlay-ref';
+export type CreateOverlayHandlerConfig<T, D = unknown, R = unknown> = Omit<OverlayConfig<D>, 'positions'> & {
+    /** The overlay component. Use either this or the `template` property  */
+    component?: ComponentType<T>;
+    /** The overlay template. Use either this or the `component` property  */
+    template?: TemplateRef<T>;
+    /** The overlay positions using the position builder provided via argument  */
+    positions: (builder: OverlayPositionBuilder) => OverlayBreakpointConfigEntry[];
+};
+export type OverlayHandler<T, D = unknown, R = unknown> = {
+    /** Open the overlay using a combination of the given configs  */
+    open: (config?: OverlayConsumerConfig<D>) => OverlayRef<T, R>;
+    /**
+     * Returns the typed overlay ref.
+     * @throws Error if the overlay ref gets accessed outside of the overlay component or templateRef
+     */
+    getOverlayRef: () => OverlayRef<T, R>;
+};
+export type CreateOverlayHandlerInnerConfig<R = unknown> = {
+    /** A callback function to be executed once the overlay has been closed */
+    afterClosed?: (result: R | null) => void;
+};
+export declare const createOverlayHandler: <T, D = unknown, R = unknown>(rootConfig: CreateOverlayHandlerConfig<T, D, R>) => (innerConfig?: CreateOverlayHandlerInnerConfig<R>) => OverlayHandler<T, D, R>;

package/lib/components/tabs/components/inline-tabs/inline-tabs.component.d.ts

@@ -1,6 +1,7 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { AfterContentChecked, AfterContentInit, ElementRef, EventEmitter, OnDestroy, TrackByFunction } from '@angular/core';
 import { NgClassType, TypedQueryList } from '@ethlete/core';
+import { ScrollableDirection } from '../../../scrollable/components/scrollable';
 import { InlineTabComponent } from '../../partials/inline-tabs/inline-tab';
 import * as i0 from "@angular/core";
 export declare class InlineTabChangeEvent {
@@ -23,6 +24,7 @@ export declare class InlineTabsComponent implements AfterContentInit, AfterConte
     renderMasks: boolean;
     renderButtons: boolean;
     renderScrollbars: boolean;
+    direction: import("@angular/core").InputSignal<ScrollableDirection>;
     readonly selectedIndexChange: EventEmitter<number>;
     readonly focusChange: EventEmitter<InlineTabChangeEvent>;
     readonly selectedTabChange: EventEmitter<InlineTabChangeEvent>;
@@ -53,7 +55,7 @@ export declare class InlineTabsComponent implements AfterContentInit, AfterConte
     private _subscribeToTabLabels;
     private _createChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<InlineTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InlineTabsComponent, "et-inline-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "contentTabIndex": { "alias": "contentTabIndex"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "tabHeaderClasses": { "alias": "tabHeaderClasses"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "scrollableClass": { "alias": "scrollableClass"; "required": false; }; "renderMasks": { "alias": "renderMasks"; "required": false; }; "renderButtons": { "alias": "renderButtons"; "required": false; }; "renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "selectedTabChange": "selectedTabChange"; }, ["_allTabs"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineTabsComponent, "et-inline-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "contentTabIndex": { "alias": "contentTabIndex"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "tabHeaderClasses": { "alias": "tabHeaderClasses"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "scrollableClass": { "alias": "scrollableClass"; "required": false; }; "renderMasks": { "alias": "renderMasks"; "required": false; }; "renderButtons": { "alias": "renderButtons"; "required": false; }; "renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "selectedTabChange": "selectedTabChange"; }, ["_allTabs"], never, true, never>;
     static ngAcceptInputType_selectedIndex: unknown;
     static ngAcceptInputType_contentTabIndex: unknown;
     static ngAcceptInputType_preserveContent: unknown;

package/lib/components/tabs/utils/paginated-tab-header.directive.d.ts

@@ -2,7 +2,7 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import { Direction } from '@angular/cdk/bidi';
 import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { NgClassType, TypedQueryList } from '@ethlete/core';
-import { ScrollableComponent } from '../../scrollable/components/scrollable';
+import { ScrollableComponent, ScrollableDirection } from '../../scrollable/components/scrollable';
 import * as i0 from "@angular/core";
 export type TabPaginationScrollDirection = 'after' | 'before';
 export type PaginatedTabHeaderItem = FocusableOption & {
@@ -36,6 +36,7 @@ export declare abstract class PaginatedTabHeaderDirective implements AfterConten
     renderMasks: boolean;
     renderButtons: boolean;
     renderScrollbars: boolean;
+    direction: import("@angular/core").InputSignal<ScrollableDirection>;
     readonly selectFocusedIndex: EventEmitter<number>;
     readonly indexFocused: EventEmitter<number>;
     constructor();
@@ -66,7 +67,7 @@ export declare abstract class PaginatedTabHeaderDirective implements AfterConten
     _handlePaginatorPress(direction: TabPaginationScrollDirection, mouseEvent?: MouseEvent): void;
     private _scrollTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginatedTabHeaderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PaginatedTabHeaderDirective, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "scrollableClass": { "alias": "scrollableClass"; "required": false; }; "renderMasks": { "alias": "renderMasks"; "required": false; }; "renderButtons": { "alias": "renderButtons"; "required": false; }; "renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PaginatedTabHeaderDirective, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "scrollableClass": { "alias": "scrollableClass"; "required": false; }; "renderMasks": { "alias": "renderMasks"; "required": false; }; "renderButtons": { "alias": "renderButtons"; "required": false; }; "renderScrollbars": { "alias": "renderScrollbars"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, never, never, false, never>;
     static ngAcceptInputType_renderMasks: unknown;
     static ngAcceptInputType_renderButtons: unknown;
     static ngAcceptInputType_renderScrollbars: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.30.0",
+  "version": "4.32.0",
   "exports": {
     ".": {
       "css": "./src/lib/styles/index.css",

package/src/lib/styles/active-tab-underline.css

@@ -48,3 +48,16 @@
 .et-tab-content {
   position: relative;
 }
+
+.et-scrollable[direction='vertical'] {
+  .et-active-tab-underline {
+    justify-content: flex-start;
+
+    .et-active-tab-underline__content--underline {
+      border-top: unset;
+      width: unset;
+      height: 100%;
+      border-right: var(--et-active-tab-underline-height) solid var(--et-active-tab-underline-color);
+    }
+  }
+}