@ethlete/cdk 4.28.0 → 4.28.2

package/lib/components/tabs/partials/nav-tabs/nav-tab-link/nav-tab-link.directive.d.ts

@@ -0,0 +1,44 @@
+import { FocusableOption } from '@angular/cdk/a11y';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../utils/active-tab-underline.util";
+export declare class NavTabLinkComponent implements OnInit, AfterViewInit, OnDestroy, FocusableOption {
+    private _tabNavBar;
+    elementRef: ElementRef<any>;
+    private _focusMonitor;
+    private _router;
+    private _cdr;
+    private _ngZone;
+    _link: RouterLink | null;
+    _linkWithHref: RouterLink | null;
+    _linkConfig: RouterLinkActive | null;
+    get active(): boolean;
+    tabIndex: number;
+    disabled: boolean;
+    id: string;
+    get _attrAriaControls(): string | null;
+    get _attrAriaCurrent(): string | null;
+    get _attrAriaDisabled(): boolean;
+    get _attrAriaSelected(): string | null;
+    get _attrTabIndex(): number;
+    get _attrRole(): string | null;
+    constructor(tabIndex: string);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    focus(): void;
+    _handleFocus(): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    _getAriaControls(): string | null;
+    _getAriaSelected(): string | null;
+    _getAriaCurrent(): string | null;
+    _getRole(): string | null;
+    _getTabIndex(): number;
+    _markForCheck(): void;
+    private _haltDisabledEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavTabLinkComponent, [{ attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavTabLinkComponent, "[et-nav-tab-link]", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.ActiveTabUnderlineDirective; inputs: { "fitUnderlineToContent": "fitUnderlineToContent"; }; outputs: {}; }]>;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/lib/components/tabs/partials/nav-tabs/nav-tabs-outlet/nav-tabs-outlet.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class NavTabsOutletComponent {
+    id: string;
+    get _attrAriaLabelledBy(): string | undefined;
+    get _attrRole(): string;
+    get _attrId(): string;
+    _activeTabId?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavTabsOutletComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavTabsOutletComponent, "et-nav-tabs-outlet", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/tabs/tab.imports.d.ts

@@ -0,0 +1,12 @@
+import { InlineTabsComponent } from './components/inline-tabs';
+import { NavTabsComponent } from './components/nav-tabs';
+import { InlineTabComponent } from './partials/inline-tabs/inline-tab';
+import { InlineTabBodyComponent } from './partials/inline-tabs/inline-tab-body';
+import { InlineTabBodyHostDirective } from './partials/inline-tabs/inline-tab-body-host';
+import { InlineTabContentDirective } from './partials/inline-tabs/inline-tab-content';
+import { InlineTabHeaderComponent } from './partials/inline-tabs/inline-tab-header';
+import { InlineTabLabelDirective } from './partials/inline-tabs/inline-tab-label';
+import { InlineTabLabelWrapperDirective } from './partials/inline-tabs/inline-tab-label-wrapper';
+import { NavTabLinkComponent } from './partials/nav-tabs/nav-tab-link';
+import { NavTabsOutletComponent } from './partials/nav-tabs/nav-tabs-outlet';
+export declare const TabImports: readonly [typeof InlineTabsComponent, typeof InlineTabBodyComponent, typeof InlineTabBodyHostDirective, typeof InlineTabComponent, typeof InlineTabContentDirective, typeof InlineTabHeaderComponent, typeof InlineTabLabelDirective, typeof InlineTabLabelWrapperDirective, typeof NavTabsOutletComponent, typeof NavTabLinkComponent, typeof NavTabsComponent];

package/lib/components/tabs/types/tab-config.types.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+export interface TabConfig {
+    disablePagination?: boolean;
+    fitInkBarToContent?: boolean;
+    contentTabIndex?: number;
+    preserveContent?: boolean;
+}
+export declare const TABS_CONFIG: InjectionToken<TabConfig>;

package/lib/components/tabs/utils/active-tab-underline.util.d.ts

@@ -0,0 +1,40 @@
+import { ElementRef, InjectionToken, OnDestroy, OnInit } from '@angular/core';
+import { TypedQueryList } from '@ethlete/core';
+import * as i0 from "@angular/core";
+export interface ActiveTabUnderlineItem extends OnInit, OnDestroy {
+    elementRef: ElementRef<HTMLElement>;
+    activateUnderline(previousIndicatorClientRect?: DOMRect): void;
+    deactivateUnderline(): void;
+    fitUnderlineToContent: boolean;
+}
+export declare class ActiveTabUnderlineBarManager {
+    private _items;
+    private _currentItem;
+    constructor(_items: TypedQueryList<ActiveTabUnderlineItem>);
+    hide(): void;
+    alignToElement(element: HTMLElement): void;
+}
+export declare class ActiveTabUnderlineDirective implements OnInit, OnDestroy {
+    readonly elementRef: ElementRef<HTMLElement>;
+    private _underlineElement;
+    private _underlineContentElement;
+    get fitUnderlineToContent(): boolean;
+    set fitUnderlineToContent(v: unknown);
+    private _fitToContent;
+    activateUnderline(previousIndicatorClientRect?: DOMRect): void;
+    deactivateUnderline(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private _createUnderlineElement;
+    private _appendUnderlineElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActiveTabUnderlineDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ActiveTabUnderlineDirective, never, never, { "fitUnderlineToContent": { "alias": "fitUnderlineToContent"; "required": false; }; }, {}, never, never, true, never>;
+}
+export interface _ActiveTabUnderlinePositioner {
+    (element: HTMLElement): {
+        left: string;
+        width: string;
+    };
+}
+export declare function _MAT_INK_BAR_POSITIONER_FACTORY(): _ActiveTabUnderlinePositioner;
+export declare const _MAT_INK_BAR_POSITIONER: InjectionToken<_ActiveTabUnderlinePositioner>;

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

@@ -0,0 +1,73 @@
+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 * as i0 from "@angular/core";
+export type TabPaginationScrollDirection = 'after' | 'before';
+export type PaginatedTabHeaderItem = FocusableOption & {
+    elementRef: ElementRef;
+};
+export declare abstract class PaginatedTabHeaderDirective implements AfterContentChecked, AfterContentInit, OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected _cdr: ChangeDetectorRef;
+    private _viewportRuler;
+    private _dir;
+    private _ngZone;
+    abstract _items: TypedQueryList<PaginatedTabHeaderItem>;
+    abstract _scrollable: ScrollableComponent;
+    abstract _activeTabUnderlineManager?: {
+        hide: () => void;
+        alignToElement: (element: HTMLElement) => void;
+    };
+    private _scrollDistance;
+    private _selectedIndexChanged;
+    protected readonly _destroy$: import("rxjs").Observable<boolean>;
+    _tabLabelCount: number;
+    private _scrollDistanceChanged;
+    private _keyManager;
+    private _currentTextContent;
+    private _stopScrolling;
+    get selectedIndex(): number;
+    set selectedIndex(val: unknown);
+    private _selectedIndex;
+    itemSize: 'auto' | 'same';
+    scrollableClass?: NgClassType;
+    renderMasks: boolean;
+    renderButtons: boolean;
+    renderScrollbars: boolean;
+    readonly selectFocusedIndex: EventEmitter<number>;
+    readonly indexFocused: EventEmitter<number>;
+    constructor();
+    protected abstract _itemSelected(event: KeyboardEvent): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    ngOnDestroy(): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    _onContentChanges(): void;
+    updatePagination(): void;
+    get focusIndex(): number;
+    set focusIndex(value: number);
+    _isValidIndex(index: number): boolean;
+    _setTabFocus(tabIndex: number): void;
+    _getLayoutDirection(): Direction;
+    _updateTabScrollPosition(): void;
+    get scrollDistance(): number;
+    set scrollDistance(value: number);
+    _scrollHeader(direction: TabPaginationScrollDirection): {
+        maxScrollDistance: number;
+        distance: number;
+    } | undefined;
+    _handlePaginatorClick(direction: TabPaginationScrollDirection): void;
+    _scrollToLabel(labelIndex: number): void;
+    _getMaxScrollDistance(): number;
+    _alignInkBarToSelectedTab(): void;
+    _stopInterval(): void;
+    _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 ngAcceptInputType_renderMasks: unknown;
+    static ngAcceptInputType_renderButtons: unknown;
+    static ngAcceptInputType_renderScrollbars: unknown;
+}

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

@@ -0,0 +1,12 @@
+import { SwipeEndEvent, SwipeUpdateEvent } from '../types';
+import * as i0 from "@angular/core";
+export declare class SwipeHandlerService {
+    private _handlerMap;
+    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>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SwipeHandlerService>;
+}

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

@@ -0,0 +1,23 @@
+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 SwipeUpdateEvent {
+    originClientX: number;
+    originClientY: number;
+    timestamp: number;
+    movementX: number;
+    movementY: number;
+    positiveMovementX: number;
+    positiveMovementY: number;
+    isScrolling: boolean;
+    isSwiping: boolean;
+}

package/lib/utils/floating-ui.utils.d.ts

@@ -0,0 +1,2 @@
+import { Placement } from '@floating-ui/dom';
+export declare const FLOATING_UI_PLACEMENTS: Placement[];

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.28.0",
+  "version": "4.28.2",
   "exports": {
     ".": {
-      "css": "./src/lib/styles/index.css"
+      "css": "./src/lib/styles/index.css",
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ethlete-cdk.mjs",
+      "esm": "./esm2022/ethlete-cdk.mjs",
+      "default": "./fesm2022/ethlete-cdk.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
   "peerDependencies": {
@@ -20,5 +27,11 @@
     "@ethlete/types": "^1.6.2",
     "@floating-ui/dom": "^1.5.3",
     "rxjs": "^7.8.1"
+  },
+  "module": "fesm2022/ethlete-cdk.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
   }
-}
+}

package/.eslintrc.json

@@ -1,41 +0,0 @@
-{
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "et"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": ["element", "attribute"],
-            "prefix": "et",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/no-host-metadata-property": "off",
-        "@angular-eslint/no-input-rename": "off"
-      }
-    },
-    {
-      "files": ["*.html"],
-      "extends": ["plugin:@nx/angular-template"],
-      "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "off"
-      }
-    }
-  ]
-}

package/jest.config.ts

@@ -1,23 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'cdk',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {},
-  coverageDirectory: '../../coverage/libs/cdk',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-};

package/ng-package.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/cdk",
-  "assets": ["CHANGELOG.md", "./src/lib/styles/**/*"],
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json

@@ -1,37 +0,0 @@
-{
-  "name": "cdk",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/cdk/src",
-  "prefix": "ethlete",
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": ["{workspaceRoot}/dist/libs/cdk"],
-      "options": {
-        "project": "libs/cdk/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/cdk/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/cdk/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/libs/cdk"],
-      "options": {
-        "jestConfig": "libs/cdk/jest.config.ts"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"]
-    }
-  },
-  "tags": []
-}

package/src/index.ts

@@ -1,24 +0,0 @@
-/* eslint-disable no-restricted-imports */
-export * from './lib/components/accordion/public-api';
-export * from './lib/components/bracket/public-api';
-export * from './lib/components/button/public-api';
-export * from './lib/components/carousel/public-api';
-export * from './lib/components/filter/public-api';
-export * from './lib/components/forms/public-api';
-export * from './lib/components/icons/public-api';
-export * from './lib/components/masonry/public-api';
-export * from './lib/components/overlay/public-api';
-export * from './lib/components/pagination/public-api';
-export * from './lib/components/picture/public-api';
-export * from './lib/components/progress-spinner';
-export * from './lib/components/query-error/public-api';
-export * from './lib/components/scrollable/public-api';
-export * from './lib/components/skeleton/public-api';
-export * from './lib/components/sort/public-api';
-export * from './lib/components/table/public-api';
-export * from './lib/components/tabs/public-api';
-export * from './lib/services';
-export * from './lib/types';
-export * from './lib/utils';
-
-// Burst cache

package/src/lib/components/accordion/accordion.imports.ts

@@ -1,15 +0,0 @@
-import { AccordionComponent } from './components/accordion';
-import { AccordionGroupComponent } from './components/accordion-group';
-import { AccordionHintDirective } from './partials/accordion-hint';
-import { AccordionHintWrapperDirective } from './partials/accordion-hint-wrapper';
-import { AccordionLabelDirective } from './partials/accordion-label';
-import { AccordionLabelWrapperDirective } from './partials/accordion-label-wrapper';
-
-export const AccordionImports = [
-  AccordionHintDirective,
-  AccordionHintWrapperDirective,
-  AccordionLabelDirective,
-  AccordionLabelWrapperDirective,
-  AccordionComponent,
-  AccordionGroupComponent,
-] as const;

package/src/lib/components/accordion/components/accordion/accordion.component.animations.ts

@@ -1,9 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-
-export const accordionAnimations = {
-  animateOpenClose: trigger('animateOpenClose', [
-    state('close, void', style({ height: '0px', visibility: 'hidden' })),
-    state('open', style({ height: '*', visibility: 'visible' })),
-    transition('open <=> close, void => close', animate('300ms cubic-bezier(0.25, 0, 0.1, 1)')),
-  ]),
-};

package/src/lib/components/accordion/components/accordion/accordion.component.constants.ts

@@ -1,4 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { AccordionComponent } from './accordion.component';
-
-export const ACCORDION_COMPONENT = new InjectionToken<AccordionComponent>('AccordionComponent');

package/src/lib/components/accordion/components/accordion/accordion.component.docs.mdx

@@ -1,50 +0,0 @@
-# Accordion
-
-The accordion is a collapsible component that can be used to display content on demand.
-
-### Basic usage
-
-```html
-<et-accordion label="Some accordion">
-  <p>My content</p>
-</et-accordion>
-```
-
-### Customizing the accordion label
-
-A custom label template can be provided to the accordion component by adding a `ng-template` with the `et-accordion-label-wrapper` directive applied.
-The `et-accordion-label` directive is optional. It only provides fitting styles to the label.
-
-**Do not** place any interactive elements in the label template.
-
-```html
-<et-accordion>
-  <ng-template et-accordion-label-wrapper>
-    <span et-accordion-label>Custom label</span>
-  </ng-template>
-
-  <p>My content</p>
-</et-accordion>
-```
-
-### Hint text
-
-A hint can be displayed next to the accordion chevron icon.
-It will be displayed on screen sizes from md and up.
-The `et-accordion-hint` directive is optional. It only provides fitting styles to the hint.
-
-**Do not** place any interactive elements in the hint template.
-
-```html
-<et-accordion label="Some accordion">
-  <ng-template et-accordion-hint-wrapper>
-    <span et-accordion-hint> Hint text </span>
-  </ng-template>
-
-  <p>My content</p>
-</et-accordion>
-```
-
-#### Related docs:
-
-- [Accordion group](/story/cdk-accordion-group--default)

package/src/lib/components/accordion/components/accordion/accordion.component.html

@@ -1,40 +0,0 @@
-<div *etLet="_isOpen$ | async as isOpen" class="et-accordion-container">
-  <h3 class="et-accordion-header-wrapper">
-    <button
-      [disabled]="disabled"
-      [id]="headerId"
-      [attr.aria-controls]="bodyId"
-      [attr.aria-expanded]="isOpen"
-      [class.et-accordion-has-hint]="!!templateHint"
-      (click)="toggleAccordionOpen()"
-      class="et-accordion-header"
-      type="button"
-    >
-      <div>
-        @if (templateLabel) {
-          <ng-template [cdkPortalOutlet]="templateLabel" />
-        } @else {
-          <span et-accordion-label>{{ label }} </span>
-        }
-      </div>
-
-      @if (templateHint) {
-        <ng-template [cdkPortalOutlet]="templateHint" />
-      }
-
-      <et-chevron-icon />
-    </button>
-  </h3>
-  <div
-    [@animateOpenClose]="(_isOpen$ | async) ? 'open' : 'close'"
-    [attr.aria-labelledby]="headerId"
-    [id]="bodyId"
-    class="et-accordion-body"
-    role="region"
-  >
-    <div class="et-accordion-body-container">
-      <ng-content />
-    </div>
-  </div>
-  <hr class="et-accordion-separator" />
-</div>

package/src/lib/components/accordion/components/accordion/accordion.component.scss

@@ -1,58 +0,0 @@
-:where(.et-accordion) {
-  --chevron-size: 15px;
-}
-
-.et-accordion {
-  .et-accordion-container {
-    position: relative;
-    z-index: 1;
-  }
-
-  .et-chevron-icon {
-    display: block;
-    transform: rotate(180deg);
-    transition: transform 0.3s var(--ease-5);
-    inline-size: var(--chevron-size);
-    block-size: var(--chevron-size);
-  }
-
-  [aria-expanded='true'] {
-    .et-chevron-icon {
-      transform: rotate(0deg);
-    }
-  }
-
-  .et-accordion-header {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    inline-size: 100%;
-    block-size: 100%;
-    text-align: left;
-    background-color: transparent;
-    border: none;
-    align-items: center;
-    padding: 0;
-    gap: 15px;
-
-    &:not(:disabled) {
-      cursor: pointer;
-    }
-
-    &.et-accordion-has-hint {
-      grid-template-columns: 1fr auto auto;
-    }
-  }
-
-  .et-accordion-header-wrapper {
-    margin: 0;
-  }
-
-  .et-accordion-body {
-    overflow: hidden;
-  }
-
-  .et-accordion-separator {
-    position: relative;
-    z-index: -1;
-  }
-}