@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/masonry/components/masonry/masonry.component.ts

@@ -1,301 +0,0 @@
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  inject,
-  Input,
-  numberAttribute,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import {
-  createDestroy,
-  DELAYABLE_TOKEN,
-  ObserveResizeDirective,
-  signalHostClasses,
-  TypedQueryList,
-} from '@ethlete/core';
-import { BehaviorSubject, combineLatest, debounceTime, of, startWith, switchMap, takeUntil, tap, timer } from 'rxjs';
-import { MASONRY_ITEM_TOKEN, MasonryItemComponent } from '../../partials/masonry-item';
-
-type MasonryState = {
-  preferredColumnWidth: number;
-  columnWidth: number;
-  columns: number;
-  gridRowElHeights: number[][];
-  hostHeight: number;
-  hostDimensions: DOMRect | null;
-  gap: number;
-  isInitialized: boolean;
-  itemCount: number;
-};
-
-@Component({
-  selector: 'et-masonry',
-  template: `
-    <div (etObserveResize)="setResizeEvent()"></div>
-    <ng-content select="[etMasonryItem], et-masonry-item, ng-container" />
-  `,
-  styleUrls: ['./masonry.component.scss'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'et-masonry',
-  },
-  imports: [ObserveResizeDirective],
-})
-export class MasonryComponent implements AfterContentInit {
-  private readonly _destroy$ = createDestroy();
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _delayable = inject(DELAYABLE_TOKEN, { optional: true });
-
-  @ContentChildren(forwardRef(() => MASONRY_ITEM_TOKEN), { descendants: true })
-  private readonly _items?: TypedQueryList<MasonryItemComponent>;
-
-  @Input()
-  get columWidth(): number {
-    return this._columWidth$.getValue() || 250;
-  }
-  set columWidth(value: unknown) {
-    this._columWidth$.next(numberAttribute(value, 250));
-  }
-  private _columWidth$ = new BehaviorSubject<number>(250);
-
-  @Input()
-  get gap(): number {
-    return this._gap$.getValue() || 0;
-  }
-  set gap(value: unknown) {
-    this._gap$.next(numberAttribute(value, 16));
-  }
-  private _gap$ = new BehaviorSubject<number>(16);
-
-  @Output()
-  readonly initializing = new EventEmitter();
-
-  @Output()
-  readonly initialized = new EventEmitter();
-
-  private readonly _didResize$ = new BehaviorSubject(false);
-  private readonly _didInitialize$ = new BehaviorSubject(false);
-  private readonly _hideOverflow$ = new BehaviorSubject(false);
-
-  readonly hostClassBindings = signalHostClasses({
-    'et-masonry--initialized': toSignal(this._didInitialize$),
-    'et-masonry--hide-overflow': toSignal(this._hideOverflow$),
-  });
-
-  private readonly _state: MasonryState = {
-    preferredColumnWidth: 0,
-    columnWidth: 0,
-    columns: 0,
-    gridRowElHeights: [],
-    hostHeight: 0,
-    hostDimensions: null,
-    gap: 0,
-    itemCount: 0,
-    isInitialized: false,
-  };
-
-  ngAfterContentInit(): void {
-    if (!this._items) {
-      return;
-    }
-
-    this._delayable?.enableDelayed();
-
-    combineLatest([this._items.changes.pipe(startWith(this._items)), this._didResize$, this._columWidth$, this._gap$])
-      .pipe(
-        debounceTime(1),
-        tap(([, didResize, colWidth, gap]) => {
-          if (didResize) {
-            this._didResize$.next(false);
-          }
-
-          const isCompleteInvalid =
-            didResize || colWidth !== this._state.preferredColumnWidth || gap !== this._state.gap;
-
-          this.invalidate({ partial: !isCompleteInvalid });
-        }),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-
-    this._didResize$
-      .pipe(
-        tap(() => this._hideOverflow$.next(true)),
-        switchMap(() => timer(150)),
-        tap(() => this._hideOverflow$.next(false)),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-
-    this._items.changes
-      .pipe(
-        startWith(this._items),
-        switchMap((items) =>
-          items.length
-            ? combineLatest(
-                items
-                  .toArray()
-                  .filter((i): i is MasonryItemComponent => !!i)
-                  .map((i) => i.isPositioned$),
-              )
-            : of([]),
-        ),
-        switchMap((positioned) => {
-          const allPositioned = positioned.every((i) => i);
-
-          if (!allPositioned) {
-            this._didInitialize$.next(allPositioned);
-            this.initializing.emit();
-            this._delayable?.enableDelayed();
-            return of(null);
-          }
-
-          return timer(100).pipe(
-            tap(() => {
-              this._didInitialize$.next(true);
-              this._delayable?.disableDelayed();
-              this.initialized.emit();
-            }),
-          );
-        }),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-  }
-
-  invalidate(config?: { partial?: boolean }) {
-    const itemList = this._items;
-    const state = this._state;
-
-    if (!itemList) {
-      return;
-    }
-
-    const items = itemList.toArray().filter((i): i is MasonryItemComponent => !!i);
-
-    if (!config?.partial || !state.isInitialized) {
-      state.preferredColumnWidth = this.columWidth;
-      state.hostDimensions = this._getHostDimensions();
-      state.columns = Math.floor(state.hostDimensions.width / this.columWidth);
-      state.gap = this.gap;
-      state.itemCount = items.length;
-      state.columnWidth = (state.hostDimensions.width - (state.columns - 1) * state.gap) / state.columns;
-      this._setColumnWidth(state.columnWidth);
-
-      /**
-       * Data structure:
-       * [
-       *  [currentTotalHeightOfCol, itemHeight, itemHeight, itemHeight],
-       *  [currentTotalHeightOfCol, itemHeight, itemHeight, itemHeight],
-       * ]
-       */
-      state.gridRowElHeights = Array.from({ length: state.columns }).map(() => [0]);
-
-      this._paintMasonry(0, items);
-
-      state.isInitialized = true;
-    } else {
-      const fromIndex = items.findIndex((item) => !item.isPositioned);
-
-      // item count 20 fromIndex 20 + 1 -> 21 => partial invalidation
-      if (fromIndex + 1 > state.itemCount) {
-        state.itemCount = items.length;
-        this._paintMasonry(fromIndex, items);
-
-        return;
-      }
-
-      // do a full invalidation the fromIndex is not the first new item
-      this.invalidate();
-    }
-  }
-
-  private _paintMasonry(fromIndex = 0, items: MasonryItemComponent[]) {
-    const state = this._state;
-
-    for (let itemIndex = fromIndex; itemIndex < items.length; itemIndex++) {
-      const item = items[itemIndex];
-
-      if (!item) {
-        continue;
-      }
-
-      const initialItemDimensions = item.initialDimensions;
-      const updatedDimensions = item.dimensions;
-
-      if (!initialItemDimensions || !updatedDimensions) {
-        continue;
-      }
-
-      const { lowestColumnHeight, lowestColumnIndex } = this._getLowestColumn(state.gridRowElHeights);
-
-      const x = state.columnWidth * lowestColumnIndex + lowestColumnIndex * state.gap;
-
-      item.setPosition(x, lowestColumnHeight, updatedDimensions.height);
-
-      const row = state.gridRowElHeights[lowestColumnIndex];
-
-      if (!row) continue;
-
-      row.push(updatedDimensions.height);
-      row[0] += updatedDimensions.height + state.gap;
-    }
-
-    state.hostHeight = this._getHighestColumn(state.gridRowElHeights).highestColumnHeight - state.gap;
-
-    this._elementRef.nativeElement.style.setProperty('height', `${state.hostHeight}px`);
-  }
-
-  protected setResizeEvent() {
-    this._didResize$.next(true);
-  }
-
-  private _getHostDimensions() {
-    return this._elementRef.nativeElement.getBoundingClientRect();
-  }
-
-  private _setColumnWidth(width: number) {
-    this._elementRef.nativeElement.style.setProperty('--et-masonry-column-width', `${width}px`);
-  }
-
-  private _getLowestColumn = (columnHeights: number[][]) => {
-    let lowestColumnHeight = columnHeights[0]?.[0] ?? 0;
-    let lowestColumnIndex = 0;
-
-    for (let i = 0; i < columnHeights.length; i++) {
-      const columnHeight = columnHeights[i]?.[0];
-
-      if (columnHeight !== undefined && columnHeight < lowestColumnHeight) {
-        lowestColumnHeight = columnHeight;
-        lowestColumnIndex = i;
-      }
-    }
-
-    return { lowestColumnHeight, lowestColumnIndex };
-  };
-
-  private _getHighestColumn = (columnHeights: number[][]) => {
-    let highestColumnHeight = columnHeights[0]?.[0] ?? 0;
-    let highestColumnIndex = 0;
-
-    for (let i = 0; i < columnHeights.length; i++) {
-      const columnHeight = columnHeights[i]?.[0];
-
-      if (columnHeight !== undefined && columnHeight >= highestColumnHeight) {
-        highestColumnHeight = columnHeight;
-        highestColumnIndex = i;
-      }
-    }
-
-    return { highestColumnHeight, highestColumnIndex };
-  };
-}

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

@@ -1,4 +0,0 @@
-import { MasonryComponent } from './components/masonry';
-import { MasonryItemComponent } from './partials/masonry-item';
-
-export const MasonryImports = [MasonryComponent, MasonryItemComponent] as const;

package/src/lib/components/masonry/partials/masonry-item/masonry-item.component.ts

@@ -1,80 +0,0 @@
-import { AfterViewInit, Component, ElementRef, inject, InjectionToken, Input, ViewChild } from '@angular/core';
-import { nextFrame } from '@ethlete/core';
-import { BehaviorSubject } from 'rxjs';
-
-export const MASONRY_ITEM_TOKEN = new InjectionToken<MasonryItemComponent>('ET_MASONRY_ITEM');
-
-@Component({
-  selector: '[et-masonry-item], et-masonry-item',
-  template: `<div #innerElement class="et-masonry-item-inner"><ng-content /></div>`,
-  standalone: true,
-  exportAs: 'etMasonryItem',
-  host: {
-    class: 'et-masonry-item',
-    role: 'listitem',
-    style: 'opacity: 0;',
-  },
-  providers: [{ provide: MASONRY_ITEM_TOKEN, useExisting: MasonryItemComponent }],
-})
-export class MasonryItemComponent implements AfterViewInit {
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  @ViewChild('innerElement', { static: true })
-  private readonly _innerElementRef?: ElementRef<HTMLElement>;
-
-  @Input()
-  get key(): string | number {
-    return this._key;
-  }
-  set key(v: string | number) {
-    this._key = v;
-
-    if (this.isPositioned) {
-      this._isPositioned$.next(false);
-    }
-  }
-  private _key!: string | number;
-
-  get dimensions() {
-    if (!this._innerElementRef?.nativeElement) {
-      return null;
-    }
-
-    return this._innerElementRef.nativeElement.getBoundingClientRect();
-  }
-
-  private _initialDimensions: DOMRect | null = null;
-
-  get initialDimensions() {
-    return this._initialDimensions;
-  }
-
-  private readonly _isPositioned$ = new BehaviorSubject(false);
-
-  get isPositioned$() {
-    return this._isPositioned$.asObservable();
-  }
-
-  get isPositioned() {
-    return this._isPositioned$.getValue();
-  }
-
-  ngAfterViewInit(): void {
-    if (!this.key) {
-      throw new Error('MasonryItemComponent: @Input() key is required');
-    }
-
-    this._initialDimensions = this.dimensions;
-    this._elementRef.nativeElement.style.setProperty('width', `var(--et-masonry-column-width)`);
-  }
-
-  setPosition(x: number, y: number, height: number) {
-    this._elementRef.nativeElement.style.setProperty('transform', `translate3d(${x}px, ${y}px, 0)`);
-    this._elementRef.nativeElement.style.setProperty('height', `${height}px`);
-
-    if (!this._isPositioned$.value) {
-      this._elementRef.nativeElement.style.setProperty('opacity', '1');
-      nextFrame(() => this._isPositioned$.next(true));
-    }
-  }
-}

package/src/lib/components/masonry/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './masonry-storybook.component';

package/src/lib/components/masonry/stories/components/masonry-storybook.component.ts

@@ -1,94 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { RepeatDirective } from '@ethlete/core';
-import { MasonryComponent } from '../../components/masonry';
-import { MasonryItemComponent } from '../../partials/masonry-item';
-
-@Component({
-  selector: 'et-sb-random-kitten',
-  template: `
-    <div [style.backgroundColor]="randomColor">
-      <img
-        [src]="randomUrl"
-        [style.aspect-ratio]="aspectRatio"
-        alt="Kitten"
-        style="max-width: 100%; object-fit: cover; min-width: 100%; "
-      />
-      <p style="margin: 0; padding: 10px 0; ">{{ randomLorem }}</p>
-    </div>
-  `,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class RandomKittenComponent {
-  readonly baseUrl = 'https://placekitten.com';
-
-  randomWidth = this.randomNumberBetween100AndMax;
-  randomHeight = this.randomNumberBetween100AndMax;
-
-  get randomUrl() {
-    return `${this.baseUrl}/${this.randomWidth}/${this.randomHeight}`;
-  }
-
-  get randomLorem() {
-    const random = Math.random();
-
-    const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies.';
-
-    return lorem.slice(0, Math.floor(random * lorem.length));
-  }
-
-  get aspectRatio() {
-    const aspectX = this.randomWidth;
-    const aspectY = this.randomHeight;
-
-    const aspectRatio = aspectX / aspectY;
-
-    const aspectRatioString = aspectRatio.toFixed(2);
-
-    return aspectRatioString;
-  }
-
-  get randomColor() {
-    const random = Math.random();
-
-    const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'white', 'gray', 'brown', 'cyan'];
-
-    return colors[Math.floor(random * colors.length)];
-  }
-
-  get randomNumberBetween100AndMax() {
-    const random = Math.random();
-
-    const num = Math.floor(random * 400 + 100);
-
-    return Math.round(num / 100) * 100;
-  }
-}
-
-@Component({
-  selector: 'et-sb-masonry',
-  template: `
-    <et-masonry [gap]="gap" [columWidth]="columWidth">
-      @for (item of repeat; track trackByFn($index, item)) {
-        <et-masonry-item [key]="item.id">
-          <et-sb-random-kitten />
-        </et-masonry-item>
-      }
-    </et-masonry>
-  `,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [MasonryComponent, MasonryItemComponent, RepeatDirective, RandomKittenComponent],
-})
-export class StorybookMasonryComponent {
-  gap = 16;
-  columWidth = 200;
-
-  repeat = new Array(25).fill(0).map(() => ({ id: Math.random() }));
-
-  trackByFn(index: number, item: { id: number }) {
-    return item.id;
-  }
-}

package/src/lib/components/masonry/stories/masonry.component.stories.ts

@@ -1,38 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Meta, StoryFn } from '@storybook/angular';
-import { StorybookMasonryComponent } from './components';
-import CustomMDXDocumentation from './masonry.docs.mdx';
-
-export default {
-  title: 'CDK/Masonry',
-  component: StorybookMasonryComponent,
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-  argTypes: {
-    gap: {
-      control: {
-        type: 'number',
-      },
-    },
-    columWidth: {
-      control: {
-        type: 'number',
-      },
-    },
-  },
-  args: {
-    gap: 16,
-    columWidth: 200,
-  },
-} as Meta<StorybookMasonryComponent>;
-
-const Template: StoryFn<StorybookMasonryComponent> = (args) => ({
-  props: args,
-});
-
-export const Default = {
-  render: Template,
-};

package/src/lib/components/masonry/stories/masonry.docs.mdx

@@ -1,24 +0,0 @@
-# Masonry
-
-A masonry layout component. It is a grid layout that supports multiple columns with items of varying height. It is a great way to display a collection of images or other content.
-Imported by adding the `MasonryImports` array to the `imports` array of your standalone component.
-
-**Important:**
-
-- Images must either have a fixed height and width or a aspect ratio set in order for the masonry layout to work correctly.
-- Dont set the masonry item's width smaller than the column width. All items will scaled automatically to fit the column width.
-- A **unique** key must be set for each masonry item. This is used to track the items and to reduce the number of DOM changes.
-- If a ngFor is used to render the masonry items, the trackBy function must be set to avoid performance issues.
-- Avoid placing ever chaning content inside the masonry. This might cause the masonry to re-render and cause performance issues.
-- Avoid changing the masonry component's width if possible.
-- Aviod changing styles of the masonry and masonry items. Only style the content **you placed** inside the masonry items.
-
-## Usage
-
-```html
-<et-masonry>
-  <et-masonry-item *ngFor="let item of items; trackBy: trackByFn" [key]="item.id">
-    <example-component />
-  </et-masonry-item>
-</et-masonry>
-```

package/src/lib/components/masonry/types/masonry.types.ts

@@ -1,4 +0,0 @@
-export interface MasonryDimensions {
-  rowGap: number;
-  rowHeight: number;
-}

package/src/lib/components/overlay/components/bottom-sheet/bottom-sheet.imports.ts

@@ -1,22 +0,0 @@
-import { Dialog, DIALOG_SCROLL_STRATEGY_PROVIDER } from '@angular/cdk/dialog';
-import { BottomSheetContainerComponent } from './components/bottom-sheet-container';
-import { BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER } from './constants';
-import { BottomSheetDragHandleComponent } from './partials/bottom-sheet-drag-handle';
-import { BottomSheetTitleDirective } from './partials/bottom-sheet-title';
-import { BottomSheetService } from './services';
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BottomSheetImports = [
-  BottomSheetContainerComponent,
-  BottomSheetTitleDirective,
-  BottomSheetDragHandleComponent,
-] as const;
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const provideBottomSheet = () => {
-  return [BottomSheetService, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, Dialog, DIALOG_SCROLL_STRATEGY_PROVIDER];
-};

package/src/lib/components/overlay/components/bottom-sheet/components/bottom-sheet-container/bottom-sheet-container.component.scss

@@ -1,20 +0,0 @@
-.et-bottom-sheet {
-  transform: translateY(var(--touch-translate-y));
-}
-
-.et-bottom-sheet.et-with-default-animation {
-  outline: none;
-
-  &.et-animation-enter-from,
-  &.et-animation-leave-to {
-    transform: translateY(100%);
-  }
-
-  &.et-animation-enter-active {
-    transition: transform 300ms var(--ease-out-5);
-  }
-
-  &.et-animation-leave-active {
-    transition: transform 150ms var(--ease-in-5);
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/components/bottom-sheet-container/bottom-sheet-container.component.ts

@@ -1,66 +0,0 @@
-import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
-import { OverlayRef } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Inject,
-  NgZone,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-import { AnimatedLifecycleDirective, nextFrame } from '@ethlete/core';
-import { BOTTOM_SHEET_CONFIG } from '../../constants';
-import { BottomSheetContainerBaseComponent } from '../../partials/bottom-sheet-container-base';
-import { BottomSheetConfig } from '../../types';
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Component({
-  selector: 'et-bottom-sheet-container',
-  styleUrls: ['./bottom-sheet-container.component.scss'],
-  template: `<ng-template cdkPortalOutlet />`,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'et-bottom-sheet',
-    tabindex: '-1',
-    '[attr.aria-modal]': '_config.ariaModal',
-    '[id]': '_config.id',
-    '[attr.role]': '_config.role',
-    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
-    '[attr.aria-label]': '_config.ariaLabel',
-    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[class.et-with-default-animation]': '!_config.customAnimated',
-    '[class]': '_config.containerClass',
-  },
-  standalone: true,
-  imports: [PortalModule],
-  hostDirectives: [AnimatedLifecycleDirective],
-})
-export class BottomSheetContainerComponent extends BottomSheetContainerBaseComponent {
-  constructor(
-    elementRef: ElementRef<HTMLElement>,
-    focusTrapFactory: FocusTrapFactory,
-    @Optional() @Inject(DOCUMENT) document: Document,
-    @Inject(BOTTOM_SHEET_CONFIG)
-    bottomSheetConfig: BottomSheetConfig,
-    checker: InteractivityChecker,
-    ngZone: NgZone,
-    public override overlayRef: OverlayRef,
-    focusMonitor?: FocusMonitor,
-  ) {
-    super(elementRef, focusTrapFactory, document, bottomSheetConfig, checker, ngZone, overlayRef, focusMonitor);
-  }
-
-  protected override _contentAttached(): void {
-    super._contentAttached();
-
-    nextFrame(() => {
-      this._animatedLifecycle.enter();
-    });
-  }
-}