@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/sort/components/sort-header/sort-header.component.ts

@@ -0,0 +1,244 @@
+import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+} from '@angular/core';
+import { Subscription, merge } from 'rxjs';
+import { ChevronIconComponent } from '../../../icons/chevron-icon';
+import { SORT_HEADER_COLUMN_DEF } from '../../../table/partials/cells/column-def';
+import { SORT_DEFAULT_OPTIONS, SortDirective, SortHeaderArrowPosition, Sortable } from '../../partials/sort';
+import { SortHeaderIntl } from '../../services';
+import { SortDirection } from '../../types';
+import { ArrowViewStateTransition } from './sort-header.types';
+
+@Component({
+  selector: '[et-sort-header]',
+  exportAs: 'etSortHeader',
+  templateUrl: 'sort-header.component.html',
+  styleUrls: ['sort-header.component.scss'],
+  host: {
+    class: 'et-sort-header',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ChevronIconComponent],
+})
+export class SortHeaderComponent implements Sortable, OnDestroy, OnInit, AfterViewInit {
+  private readonly _intl = inject(SortHeaderIntl);
+  private readonly _changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly _sort = inject(SortDirective, { optional: true });
+  private readonly _columnDef = inject(SORT_HEADER_COLUMN_DEF, { optional: true });
+  private readonly _focusMonitor = inject(FocusMonitor);
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _ariaDescriber = inject(AriaDescriber);
+  private readonly _sortDefaultOptions = inject(SORT_DEFAULT_OPTIONS, { optional: true });
+
+  private _rerenderSubscription?: Subscription;
+  private _sortButton!: HTMLElement;
+
+  _showIndicatorHint = false;
+  _viewState: ArrowViewStateTransition = {};
+  _arrowDirection: SortDirection = '';
+
+  @Input({ transform: booleanAttribute })
+  @HostBinding('class.et-sort-header-disabled')
+  disabled = false;
+
+  @Input('et-sort-header')
+  id!: string;
+
+  @Input()
+  arrowPosition: SortHeaderArrowPosition = 'after';
+
+  @Input()
+  start!: SortDirection;
+
+  @Input()
+  get sortActionDescription(): string {
+    return this._sortActionDescription;
+  }
+  set sortActionDescription(value: string) {
+    this._updateSortActionDescription(value);
+  }
+  private _sortActionDescription = 'Sort';
+
+  @Input({ transform: booleanAttribute })
+  disableClear = false;
+
+  get _isSorted() {
+    if (!this._sort) {
+      return false;
+    }
+
+    return this._sort.active == this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc');
+  }
+
+  get _getArrowDirectionState() {
+    return `${this._isSorted ? 'active-' : ''}${this._arrowDirection}`;
+  }
+
+  get _getArrowViewState() {
+    const fromState = this._viewState.fromState;
+    return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;
+  }
+
+  get _isDisabled() {
+    return this._sort?.disabled || this.disabled;
+  }
+
+  get _renderArrow() {
+    return !this._isDisabled || this._isSorted;
+  }
+
+  @HostBinding('attr.aria-sort')
+  get _ariaSortAttr() {
+    if (!this._isSorted) {
+      return 'none';
+    }
+
+    return this._sort?.direction == 'asc' ? 'ascending' : 'descending';
+  }
+
+  constructor() {
+    if (this._sortDefaultOptions?.arrowPosition) {
+      this.arrowPosition = this._sortDefaultOptions?.arrowPosition;
+    }
+
+    this._handleStateChanges();
+  }
+
+  ngOnInit() {
+    if (!this.id && this._columnDef) {
+      this.id = this._columnDef.name;
+    }
+
+    this._updateArrowDirection();
+    this._setAnimationTransitionState({
+      toState: this._isSorted ? 'active' : this._arrowDirection,
+    });
+
+    this._sort?.register(this);
+
+    this._sortButton = this._elementRef.nativeElement.querySelector('.et-sort-header-container') as HTMLElement;
+    this._updateSortActionDescription(this._sortActionDescription);
+  }
+
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._elementRef, true).subscribe((origin) => {
+      const newState = !!origin;
+      if (newState !== this._showIndicatorHint) {
+        this._setIndicatorHintVisible(newState);
+        this._changeDetectorRef.markForCheck();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this._focusMonitor.stopMonitoring(this._elementRef);
+    this._sort?.deregister(this);
+    this._rerenderSubscription?.unsubscribe();
+  }
+
+  @HostListener('mouseenter')
+  _handleMouseEnter() {
+    this._setIndicatorHintVisible(true);
+  }
+
+  @HostListener('mouseleave')
+  _handleMouseLeave() {
+    this._setIndicatorHintVisible(false);
+  }
+
+  _setIndicatorHintVisible(visible: boolean) {
+    if (this._isDisabled && visible) {
+      return;
+    }
+
+    this._showIndicatorHint = visible;
+
+    if (!this._isSorted) {
+      this._updateArrowDirection();
+      if (this._showIndicatorHint) {
+        this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
+      } else {
+        this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
+      }
+    }
+  }
+
+  _setAnimationTransitionState(viewState: ArrowViewStateTransition) {
+    this._viewState = viewState || {};
+  }
+
+  _toggleOnInteraction() {
+    this._sort?.sort(this);
+  }
+
+  @HostListener('click')
+  _handleClick() {
+    if (!this._isDisabled) {
+      this._sort?.sort(this);
+    }
+  }
+
+  @HostListener('keydown', ['$event'])
+  _handleKeydown(event: KeyboardEvent) {
+    if (!this._isDisabled && (event.keyCode === SPACE || event.keyCode === ENTER)) {
+      event.preventDefault();
+      this._toggleOnInteraction();
+    }
+  }
+
+  _updateArrowDirection() {
+    if (!this._sort) {
+      return;
+    }
+
+    this._arrowDirection = this._isSorted ? this._sort.direction : this.start || this._sort.start;
+  }
+
+  private _updateSortActionDescription(newDescription: string) {
+    if (this._sortButton) {
+      this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
+      this._ariaDescriber?.describe(this._sortButton, newDescription);
+    }
+
+    this._sortActionDescription = newDescription;
+  }
+
+  private _handleStateChanges() {
+    if (!this._sort) {
+      return;
+    }
+
+    this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges, this._intl.changes).subscribe(
+      () => {
+        if (this._isSorted) {
+          this._updateArrowDirection();
+
+          this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'active' });
+          this._showIndicatorHint = false;
+        }
+
+        if (!this._isSorted && this._viewState && this._viewState.toState === 'active') {
+          this._setAnimationTransitionState({ fromState: 'active', toState: this._arrowDirection });
+        }
+
+        this._changeDetectorRef.markForCheck();
+      },
+    );
+  }
+}

package/src/lib/components/sort/components/sort-header/sort-header.types.ts

@@ -0,0 +1,12 @@
+import { SortDirection } from '../../types';
+
+export type ArrowViewState = SortDirection | 'hint' | 'active';
+
+export interface ArrowViewStateTransition {
+  fromState?: ArrowViewState;
+  toState?: ArrowViewState;
+}
+
+export interface SortHeaderColumnDef {
+  name: string;
+}

package/src/lib/components/sort/partials/sort/sort.directive.ts

@@ -0,0 +1,162 @@
+import {
+  Directive,
+  EventEmitter,
+  InjectionToken,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  booleanAttribute,
+  inject,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable, Subject, Subscriber } from 'rxjs';
+import { SortDirection } from '../../types';
+import { Sort, SortDefaultOptions, Sortable } from './sort.types';
+
+export const SORT_DEFAULT_OPTIONS = new InjectionToken<SortDefaultOptions>('SortDefaultOptions');
+
+@Directive({
+  selector: '[etSort]',
+  exportAs: 'etSort',
+  host: { class: 'et-sort' },
+  standalone: true,
+})
+export class SortDirective implements OnChanges, OnDestroy, OnInit {
+  private readonly _defaultOptions = inject(SORT_DEFAULT_OPTIONS, { optional: true });
+
+  sortables = new Map<string, Sortable>();
+
+  readonly _stateChanges = new Subject<void>();
+
+  _isInitialized = false;
+
+  _pendingSubscribers: Subscriber<void>[] | null = [];
+
+  initialized = new Observable<void>((subscriber) => {
+    if (this._isInitialized) {
+      this._notifySubscriber(subscriber);
+    } else {
+      this._pendingSubscribers?.push(subscriber);
+    }
+  });
+
+  @Input({ alias: 'etSortDisabled', transform: booleanAttribute })
+  disabled = false;
+
+  @Input('etSortActive')
+  active?: string;
+
+  @Input('etSortStart')
+  start: SortDirection = 'asc';
+
+  @Input('etSortDirection')
+  get direction(): SortDirection {
+    return this._direction;
+  }
+  set direction(direction: SortDirection) {
+    this._direction = direction;
+  }
+  private _direction: SortDirection = '';
+
+  @Input({ alias: 'etSortDisableClear', transform: booleanAttribute })
+  disableClear = false;
+
+  @Input()
+  sortControl?: FormControl<Sort | null>;
+
+  @Input()
+  sortByControl?: FormControl<string | null>;
+
+  @Input()
+  sortDirectionControl?: FormControl<SortDirection | null>;
+
+  // eslint-disable-next-line @angular-eslint/no-output-rename
+  @Output('etSortChange')
+  readonly sortChange: EventEmitter<Sort> = new EventEmitter<Sort>();
+
+  register(sortable: Sortable): void {
+    this.sortables.set(sortable.id, sortable);
+  }
+
+  deregister(sortable: Sortable): void {
+    this.sortables.delete(sortable.id);
+  }
+
+  sort(sortable: Sortable): void {
+    if (this.active != sortable.id) {
+      this.active = sortable.id;
+      this.direction = sortable.start ? sortable.start : this.start;
+    } else {
+      this.direction = this.getNextSortDirection(sortable);
+    }
+
+    const sort: Sort = { active: this.active, direction: this.direction };
+
+    this.sortChange.emit(sort);
+    this.sortControl?.setValue(sort);
+    this.sortByControl?.setValue(sort.active);
+    this.sortDirectionControl?.setValue(sort.direction);
+  }
+
+  getNextSortDirection(sortable: Sortable): SortDirection {
+    if (!sortable) {
+      return '';
+    }
+
+    const disableClear = sortable?.disableClear ?? this.disableClear ?? !!this._defaultOptions?.disableClear;
+    const sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
+
+    let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
+    if (nextDirectionIndex >= sortDirectionCycle.length) {
+      nextDirectionIndex = 0;
+    }
+    return sortDirectionCycle[nextDirectionIndex] as SortDirection;
+  }
+
+  ngOnInit() {
+    this._markInitialized();
+
+    if (this.sortControl?.value) {
+      this.active = this.sortControl.value.active;
+      this.direction = this.sortControl.value.direction;
+    } else if (this.sortByControl?.value && this.sortDirectionControl?.value) {
+      this.active = this.sortByControl.value;
+      this.direction = this.sortDirectionControl.value;
+    }
+  }
+
+  ngOnChanges() {
+    this._stateChanges.next();
+  }
+
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
+
+  _markInitialized(): void {
+    this._isInitialized = true;
+
+    this._pendingSubscribers?.forEach(this._notifySubscriber);
+    this._pendingSubscribers = null;
+  }
+
+  _notifySubscriber(subscriber: Subscriber<void>): void {
+    subscriber.next();
+    subscriber.complete();
+  }
+}
+
+/** Returns the sort direction cycle to use given the provided parameters of order and clear. */
+function getSortDirectionCycle(start: SortDirection, disableClear: boolean): SortDirection[] {
+  const sortOrder: SortDirection[] = ['asc', 'desc'];
+  if (start == 'desc') {
+    sortOrder.reverse();
+  }
+  if (!disableClear) {
+    sortOrder.push('');
+  }
+
+  return sortOrder;
+}

package/src/lib/components/sort/partials/sort/sort.types.ts

@@ -0,0 +1,19 @@
+import { SortDirection } from '../../types';
+
+export type SortHeaderArrowPosition = 'before' | 'after';
+
+export interface Sortable {
+  id: string;
+  start: SortDirection;
+  disableClear: boolean;
+}
+
+export interface Sort {
+  active: string;
+  direction: SortDirection;
+}
+
+export interface SortDefaultOptions {
+  disableClear?: boolean;
+  arrowPosition?: SortHeaderArrowPosition;
+}

package/src/lib/components/sort/services/sort-header-intl.ts

@@ -0,0 +1,17 @@
+import { Injectable, SkipSelf, Optional } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class SortHeaderIntl {
+  readonly changes: Subject<void> = new Subject<void>();
+}
+
+export function SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: SortHeaderIntl) {
+  return parentIntl || new SortHeaderIntl();
+}
+
+export const SORT_HEADER_INTL_PROVIDER = {
+  provide: SortHeaderIntl,
+  deps: [[new Optional(), new SkipSelf(), SortHeaderIntl]],
+  useFactory: SORT_HEADER_INTL_PROVIDER_FACTORY,
+};

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

@@ -0,0 +1,9 @@
+import { SortHeaderComponent } from './components/sort-header';
+import { SortDirective } from './partials/sort';
+import { SORT_HEADER_INTL_PROVIDER } from './services';
+
+export const SortImports = [SortDirective, SortHeaderComponent] as const;
+
+export const provideSort = () => {
+  return [SORT_HEADER_INTL_PROVIDER];
+};

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

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

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

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { SortHeaderArrowPosition } from '../../partials/sort';
+import { SortImports } from '../../sort.imports';
+import { SortDirection } from '../../types';
+
+@Component({
+  selector: 'et-sb-sort',
+  template: `
+    <div [etSortStart]="start" etSort>
+      <p
+        [arrowPosition]="arrowPosition"
+        [sortActionDescription]="sortActionDescription"
+        [disableClear]="disableClear"
+        et-sort-header
+      >
+        Sort header
+      </p>
+    </div>
+  `,
+  standalone: true,
+  imports: [SortImports],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SortStorybookComponent {
+  @Input()
+  arrowPosition: SortHeaderArrowPosition = 'after';
+
+  @Input()
+  start!: SortDirection;
+
+  @Input()
+  sortActionDescription = 'Sort';
+
+  @Input()
+  disableClear = false;
+}

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

@@ -0,0 +1,26 @@
+# Sort
+
+Add sorting to an interactive element (eg. a table header).
+Imported by adding the `SortImports` array to the `imports` array in your standalone component.
+
+### Basic Usage
+
+```html
+<div etSort>
+  <p et-sort-header>Sort header</p>
+</div>
+```
+
+## In a table
+
+```html
+<et-table [dataSource]="source" (etSortChange)="sortSomething($event)" etSort>
+  <ng-container etColumnDef="name" sticky>
+    <et-header-cell *etHeaderCellDef et-sort-header> Sortable stuff </et-header-cell>
+    <et-cell *etCellDef="let row"> {{ row.name }} </et-cell>
+  </ng-container>
+
+  <et-header-row *etHeaderRowDef="['stuff']" />
+  <et-row *etRowDef="let row; columns: ['stuff']" />
+</et-table>
+```

package/src/lib/components/sort/stories/sort.stories.ts

@@ -0,0 +1,58 @@
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, StoryFn } from '@storybook/angular';
+import { SortStorybookComponent } from './components';
+import CustomMDXDocumentation from './sort.docs.mdx';
+
+export default {
+  title: 'CDK/Sort',
+  component: SortStorybookComponent,
+  decorators: [
+    applicationConfig({
+      providers: [provideAnimations()],
+    }),
+  ],
+  argTypes: {
+    arrowPosition: {
+      control: {
+        type: 'radio',
+      },
+      options: ['before', 'after'],
+    },
+    start: {
+      control: {
+        type: 'radio',
+      },
+      options: ['asc', 'desc', ''],
+    },
+    disableClear: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    sortActionDescription: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    arrowPosition: 'after',
+    start: '',
+    disableClear: false,
+    sortActionDescription: 'Sort',
+  },
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+} as Meta<SortStorybookComponent>;
+
+const Template: StoryFn<SortStorybookComponent> = (args) => ({
+  props: args,
+});
+
+export const Default = {
+  render: Template,
+  args: {},
+};

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

@@ -0,0 +1,101 @@
+:where(.et-table) {
+  --et-table-separator-color: #4c4c4c;
+  --et-table-separator-width: 1px;
+  --et-table-separator-style: solid;
+
+  --et-table-header-row-min-height: 56px;
+
+  --et-table-row-display: flex;
+  --et-table-row-min-height: 48px;
+  --et-table-row-inline-padding: 24px;
+
+  --et-table-cell-display: flex;
+  --et-table-cell-inline-padding: 0;
+  --et-table-cell-block-padding: 0;
+}
+
+.et-table {
+  display: block;
+  position: relative;
+}
+
+.et-header-row {
+  min-height: var(--et-table-header-row-min-height);
+}
+
+.et-row,
+.et-footer-row {
+  min-height: var(--et-table-row-min-height);
+}
+
+.et-row,
+.et-header-row,
+.et-footer-row {
+  display: var(--et-table-row-display);
+  border-width: 0;
+  border-bottom-width: var(--et-table-separator-width);
+  border-style: var(--et-table-separator-style);
+  border-color: var(--et-table-separator-color);
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.et-cell,
+.et-header-cell,
+.et-footer-cell {
+  padding-inline: var(--et-table-cell-inline-padding);
+  padding-block: var(--et-table-cell-block-padding);
+
+  &:first-of-type {
+    padding-inline-start: var(--et-table-row-inline-padding);
+  }
+
+  &:last-of-type {
+    padding-inline-end: var(--et-table-row-inline-padding);
+  }
+}
+
+.et-cell,
+.et-header-cell,
+.et-footer-cell {
+  flex: 1;
+  display: var(--et-table-cell-display);
+  align-items: center;
+  overflow: hidden;
+  word-wrap: break-word;
+  min-height: inherit;
+  box-sizing: border-box;
+}
+
+.et-table-sticky {
+  position: sticky !important;
+}
+
+.et-table {
+  table-layout: auto;
+  white-space: normal;
+}
+
+.et-table tbody,
+.et-table tfoot,
+.et-table thead,
+.et-cell,
+.et-footer-cell,
+.et-header-row,
+.et-row,
+.et-footer-row,
+.et-table .et-header-cell {
+  background: inherit;
+}
+
+.et-table et-header-row.et-header-row,
+.et-table et-row.et-row,
+.et-table et-footer-row.et-footer-cell {
+  height: unset;
+}
+
+et-header-cell.et-header-cell,
+et-cell.et-cell,
+et-footer-cell.et-footer-cell {
+  align-self: stretch;
+}