@ethlete/cdk 4.27.1 → 4.28.0

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

@@ -0,0 +1,301 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,80 @@
+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

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

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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,38 @@
+/* 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

@@ -0,0 +1,24 @@
+# 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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,20 @@
+.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

@@ -0,0 +1,66 @@
+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();
+    });
+  }
+}