npm - @ethlete/cdk - Versions diffs - 3.9.1 → 3.11.0 - Mend

@ethlete/cdk 3.9.1 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

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

@@ -0,0 +1,183 @@
+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';
+/** 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. */
+export type OverlayRole = 'dialog' | 'alertdialog';
+/** Possible overrides for a overlay's position. */
+export interface OverlayPosition {
+    /** Override for the overlay's top position. */
+    top?: string;
+    /** Override for the overlay's bottom position. */
+    bottom?: string;
+    /** Override for the overlay's left position. */
+    left?: string;
+    /** Override for the overlay's right position. */
+    right?: string;
+}
+export declare const OVERLAY_STATE: {
+    readonly OPEN: "open";
+    readonly CLOSING: "closing";
+    readonly CLOSED: "closed";
+};
+export type OverlayState = (typeof OVERLAY_STATE)[keyof typeof OVERLAY_STATE];
+export interface OverlayDragToDismissConfig {
+    /** Direction in which the overlay can be dragged. */
+    direction: 'to-top' | 'to-bottom' | 'to-left' | 'to-right';
+    /**
+     * The minimum distance in pixels that the user must swipe to dismiss the overlay.
+     *
+     * @default 150 // 150px
+     */
+    minDistanceToDismiss?: number;
+    /**
+     * The minimum velocity in pixels per second that the user must swipe to dismiss the overlay.
+     *
+     * @default 150 // 150px/s
+     */
+    minVelocityToDismiss?: number;
+}
+export interface OverlayBreakpointConfig {
+    /** Min-width of the overlay. If a number is provided, assumes pixel units. */
+    minWidth?: number | string;
+    /** Max-width of the overlay. If a number is provided, assumes pixel units. */
+    maxWidth?: number | string;
+    /** Min-height of the overlay. If a number is provided, assumes pixel units. */
+    minHeight?: number | string;
+    /** Max-height of the overlay. If a number is provided, assumes pixel units. */
+    maxHeight?: number | string;
+    /** Width of the overlay. */
+    width?: number | string;
+    /** Height of the overlay. */
+    height?: number | string;
+    /** Position strategy to be used for the overlay. */
+    positionStrategy?: PositionStrategy;
+    /** Custom class for the overlay container. */
+    containerClass?: string | string[];
+    /** Custom class for the overlay pane. */
+    paneClass?: string | string[];
+    /** Extra CSS classes to be added to the overlay overlay container. */
+    overlayClass?: string | string[];
+    /** Custom class for the backdrop. */
+    backdropClass?: string | string[];
+    /** Custom class for the document (`<html>` element). */
+    documentClass?: string | string[];
+    /** Custom class for the `<body>` element */
+    bodyClass?: string | string[];
+    /** Position overrides. */
+    position?: OverlayPosition;
+    /** Determine if and in what direction the overlay should be able to be dragged to dismiss it. */
+    dragToDismiss?: OverlayDragToDismissConfig;
+}
+export interface OverlayBreakpointConfigEntry {
+    /**
+     * Breakpoint to apply the config for. If a number is provided, it will be used as a pixel value.
+     * Always uses the min-width media query.
+     *
+     * @default 'xs' // 0px
+     */
+    breakpoint?: Breakpoint | number;
+    /**
+     * Overlay configuration to be applied when the breakpoint is active.
+     */
+    config: OverlayBreakpointConfig;
+}
+export interface OverlayConfig<D = unknown> {
+    /**
+     * Conditionally applied overlay configurations based on breakpoints.
+     */
+    positions: OverlayBreakpointConfigEntry[];
+    /**
+     * Where the attached component should live in Angular's *logical* component tree.
+     * This affects what is available for injection and the change detection order for the
+     * component instantiated inside of the overlay. This does not affect where the overlay
+     * content will be rendered.
+     */
+    viewContainerRef?: ViewContainerRef;
+    /**
+     * Injector used for the instantiation of the component to be attached. If provided,
+     * takes precedence over the injector indirectly provided by `ViewContainerRef`.
+     */
+    injector?: Injector;
+    /** ID for the overlay. If omitted, a unique one will be generated. */
+    id?: string;
+    /**
+     * The ARIA role of the overlay element.
+     * @default 'dialog'
+     */
+    role?: OverlayRole;
+    /**
+     * Whether the overlay has a backdrop.
+     * @default true
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Whether the user can use escape or clicking on the backdrop to close the modal.
+     * @default false
+     */
+    disableClose?: boolean;
+    /**
+     * Data being injected into the child component.
+     * @default null
+     */
+    data?: D | null;
+    /** Layout direction for the overlay's content. */
+    direction?: Direction;
+    /**
+     * ID of the element that describes the overlay.
+     * @default null
+     */
+    ariaDescribedBy?: string | null;
+    /**
+     * ID of the element that labels the overlay.
+     * @default null
+     */
+    ariaLabelledBy?: string | null;
+    /**
+     * Aria label to assign to the overlay element.
+     * @default null
+     */
+    ariaLabel?: string | null;
+    /**
+     * Whether this is a modal overlay. Used to set the `aria-modal` attribute.
+     * @default true
+     */
+    ariaModal?: boolean;
+    /**
+     * Whether the overlay uses a custom animation.
+     * @default false
+     */
+    customAnimated?: boolean;
+    /**
+     * Where the overlay should focus on open.
+     * Can be one of AutoFocusTarget, or a css selector string.
+     * @default 'first-tabbable'
+     */
+    autoFocus?: OverlayAutoFocusTarget | string;
+    /**
+     * Whether the overlay should restore focus to the
+     * previously-focused element, after it's closed.
+     * @default true
+     */
+    restoreFocus?: boolean;
+    /**
+     * Whether to wait for the opening animation to finish before trapping focus.
+     * @default true
+     */
+    delayFocusTrap?: boolean;
+    /** Scroll strategy to be used for the overlay. */
+    scrollStrategy?: ScrollStrategy;
+    /**
+     * Whether the overlay should close when the user goes backwards/forwards in history.
+     * Note that this usually doesn't include clicking on links (unless the user is using
+     * the `HashLocationStrategy`).
+     * @default true
+     */
+    closeOnNavigation?: boolean;
+    /**
+     * Extra providers to be made available to the overlay.
+     */
+    providers?: StaticProvider[];
+}

package/lib/components/overlay/components/overlay/types/public-api.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './overlay.types';

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

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

package/lib/components/overlay/components/overlay/utils/overlay-config.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { OverlayConfig } from '../types';
2	+ export declare const createOverlayConfig: <D = unknown>(globalConfig?: Partial<OverlayConfig<D>> \| null \| undefined, localConfig?: Partial<OverlayConfig<D>> \| null \| undefined) => OverlayConfig<D>;

package/lib/components/overlay/components/overlay/utils/overlay-position-builder.d.ts ADDED Viewed

@@ -0,0 +1,100 @@
+import { OverlayBreakpointConfig, OverlayBreakpointConfigEntry } from '../types';
+export declare const ET_OVERLAY_LEFT_SHEET_CLASS = "et-overlay--left-sheet";
+export declare const ET_OVERLAY_RIGHT_SHEET_CLASS = "et-overlay--right-sheet";
+export declare const ET_OVERLAY_TOP_SHEET_CLASS = "et-overlay--top-sheet";
+export declare const ET_OVERLAY_BOTTOM_SHEET_CLASS = "et-overlay--bottom-sheet";
+export declare const ET_OVERLAY_DIALOG_CLASS = "et-overlay--dialog";
+export declare const ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS = "et-overlay--full-screen-dialog";
+export declare class OverlayPositionBuilder {
+    private readonly _overlay;
+    readonly DEFAULTS: {
+        dialog: {
+            width: undefined;
+            height: undefined;
+            maxHeight: string;
+            maxWidth: string;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+        };
+        fullScreenDialog: {
+            width: string;
+            height: string;
+            maxHeight: undefined;
+            maxWidth: undefined;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+            documentClass: string;
+        };
+        bottomSheet: {
+            width: string;
+            height: undefined;
+            maxHeight: string;
+            maxWidth: string;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+            dragToDismiss: {
+                direction: "to-bottom";
+            };
+        };
+        topSheet: {
+            width: string;
+            height: undefined;
+            maxHeight: string;
+            maxWidth: string;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+            dragToDismiss: {
+                direction: "to-top";
+            };
+        };
+        leftSheet: {
+            width: string;
+            height: string;
+            maxHeight: undefined;
+            maxWidth: string;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+            dragToDismiss: {
+                direction: "to-left";
+            };
+        };
+        rightSheet: {
+            width: string;
+            height: string;
+            maxHeight: undefined;
+            maxWidth: string;
+            minHeight: undefined;
+            minWidth: undefined;
+            containerClass: string;
+            positionStrategy: import("@angular/cdk/overlay").GlobalPositionStrategy;
+            dragToDismiss: {
+                direction: "to-right";
+            };
+        };
+    };
+    transformingBottomSheetToDialog(customConfig?: {
+        bottomSheet?: OverlayBreakpointConfig;
+        dialog?: OverlayBreakpointConfig;
+    }): OverlayBreakpointConfigEntry[];
+    transformingFullScreenDialogToRightSheet(customConfig?: {
+        fullScreenDialog?: OverlayBreakpointConfig;
+        rightSheet?: OverlayBreakpointConfig;
+    }): OverlayBreakpointConfigEntry[];
+    dialog(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    fullScreenDialog(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    bottomSheet(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    topSheet(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    leftSheet(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    rightSheet(customConfig?: OverlayBreakpointConfig): OverlayBreakpointConfigEntry[];
+    mergeConfigs(...configs: OverlayBreakpointConfig[]): OverlayBreakpointConfig;
+}

package/lib/components/overlay/components/overlay/utils/overlay-ref.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { DialogRef as CdkDialogRef } from '@angular/cdk/dialog';
+import { ComponentRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { OverlayContainerComponent } from '../components';
+import { OverlayConfig, OverlayPosition, OverlayState } from '../types';
+export declare class OverlayRef<T = any, R = any> {
+    private _ref;
+    _containerInstance: OverlayContainerComponent;
+    componentInstance: T | null;
+    readonly componentRef: ComponentRef<T> | null;
+    disableClose: boolean | undefined;
+    id: string;
+    private readonly _afterOpened;
+    private readonly _beforeClosed;
+    private _result;
+    private _state;
+    private _closeInteractionType;
+    get _cdkRef(): CdkDialogRef<R, T>;
+    constructor(_ref: CdkDialogRef<R, T>, config: OverlayConfig, _containerInstance: OverlayContainerComponent);
+    close(result?: R): void;
+    afterOpened(): Observable<void>;
+    afterClosed(): Observable<R | undefined>;
+    beforeClosed(): Observable<R | undefined>;
+    backdropClick(): Observable<MouseEvent>;
+    keydownEvents(): Observable<KeyboardEvent>;
+    updatePosition(position?: OverlayPosition): this;
+    updateSize(width?: string, height?: string): this;
+    addPanelClass(classes: string | string[]): this;
+    removePanelClass(classes: string | string[]): this;
+    getState(): OverlayState;
+    private _finishOverlayClose;
+    _closeOverlayVia(interactionType: FocusOrigin, result?: R): void;
+}

package/lib/components/overlay/components/overlay/utils/overlay.utils.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { ElementRef } from '@angular/core';
+import { OverlayConfig } from '../types';
+import { OverlayRef } from './overlay-ref';
+export declare function getClosestOverlay(element: ElementRef<HTMLElement>, openOverlays: OverlayRef<unknown>[]): OverlayRef<unknown, any> | null | undefined;
+export declare const provideOverlayDefaultConfig: (config?: Partial<OverlayConfig> | null | undefined) => {
+    provide: import("@angular/core").InjectionToken<OverlayConfig<unknown>>;
+    useValue: OverlayConfig<unknown>;
+};

package/lib/components/overlay/components/overlay/utils/public-api.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export * from './overlay-config';
+export * from './overlay-position-builder';
+export * from './overlay-ref';
+export * from './overlay.utils';

package/lib/components/overlay/components/public-api.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from './bottom-sheet/public-api';
 export * from './dialog/public-api';
 export * from './menu/public-api';
+export * from './overlay/public-api';
 export * from './toggletip/public-api';
 export * from './tooltip/public-api';

package/lib/components/overlay/index.d.ts ADDED Viewed

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

package/lib/components/public-api.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 export * from './accordion/public-api';
 export * from './bracket/public-api';
 export * from './button/public-api';
+export * from './filter-overlay/public-api';
 export * from './forms/public-api';
 export * from './icons/public-api';
 export * from './masonry/public-api';

package/lib/services/swipe-handler.service.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import { SwipeEnd, SwipeHandler } from '../types';
+import { SwipeEndEvent, SwipeUpdateEvent } from '../types';
 import * as i0 from "@angular/core";
 export declare class SwipeHandlerService {
     private _handlerMap;
-    startSwipe(event: TouchEvent): number;
-    updateSwipe(handlerId: number, event: TouchEvent): SwipeHandler;
-    endSwipe(handlerId: number): SwipeEnd;
+    startSwipe(event: TouchEvent | MouseEvent): number;
+    updateSwipe(handlerId: number, event: TouchEvent | MouseEvent): SwipeUpdateEvent | null;
+    endSwipe(handlerId: number): SwipeEndEvent | null;
     cancelSwipe(handlerId: number): void;
     private _getSwipeHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<SwipeHandlerService, never>;

package/lib/types/swipe.types.d.ts CHANGED Viewed

@@ -1,12 +1,16 @@
-export interface SwipeEnd {
+export interface SwipeEndEvent {
+    positivePixelPerSecondX: number;
+    positivePixelPerSecondY: number;
     pixelPerSecondX: number;
     pixelPerSecondY: number;
     movementX: number;
     movementY: number;
+    positiveMovementX: number;
+    positiveMovementY: number;
     originClientX: number;
     originClientY: number;
 }
-export interface SwipeHandler {
+export interface SwipeUpdateEvent {
     originClientX: number;
     originClientY: number;
     timestamp: number;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cdk",
-  "version": "3.9.1",
+  "version": "3.11.0",
   "exports": {
     ".": {
       "css": "./src/lib/styles/index.css",
@@ -19,9 +19,9 @@
   "peerDependencies": {
     "@angular/common": "^15.2.1 || ^16.0.0",
     "@angular/core": "^15.2.1 || ^16.0.0",
-    "@ethlete/core": "3.4.0",
-    "@angular/animations": "16.2.3",
-    "@ethlete/query": "4.11.0"
+    "@ethlete/core": "3.5.0",
+    "@angular/animations": "16.2.5",
+    "@ethlete/query": "4.13.0"
   },
   "module": "fesm2022/ethlete-cdk.mjs",
   "typings": "index.d.ts",

package/src/lib/styles/cdk.css CHANGED Viewed

@@ -4,8 +4,15 @@
 .cdk-overlay-pane {
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
 }
 .et-force-invisible {
   opacity: 0 !important;
 }
+.et-global-no-overscroll,
+.et-global-no-overscroll body {
+  overscroll-behavior: none;
+}