@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/forms/components/select/components/native-select/native-select.imports.ts

@@ -0,0 +1,19 @@
+import { InputPrefixDirective } from '../../../../directives/input-prefix';
+import { InputSuffixDirective } from '../../../../directives/input-suffix';
+import { LabelComponent } from '../../../label/components/label';
+import { SelectFieldComponent } from '../select-field';
+import { NativeSelectInputComponent } from './components/native-select';
+import { NativeSelectInputDirective } from './directives/native-select-input';
+import { NativeSelectOptionDirective } from './directives/native-select-option';
+import { NativeSelectOptionComponent } from './partials/native-select-option';
+
+export const NativeSelectImports = [
+  NativeSelectInputComponent,
+  NativeSelectOptionComponent,
+  SelectFieldComponent,
+  NativeSelectInputDirective,
+  NativeSelectOptionDirective,
+  InputPrefixDirective,
+  InputSuffixDirective,
+  LabelComponent,
+] as const;

package/src/lib/components/forms/components/select/components/native-select/partials/native-select-option/native-select-option.component.ts

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NativeSelectOptionDirective } from '../../directives/native-select-option';
+
+@Component({
+  selector: 'et-native-select-option',
+  template: ` <ng-template #textTpl> <ng-content /></ng-template> `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-native-select-option',
+  },
+  hostDirectives: [{ directive: NativeSelectOptionDirective, inputs: ['value', 'disabled', 'hidden'] }],
+})
+export class NativeSelectOptionComponent implements OnInit {
+  protected readonly option = inject(NativeSelectOptionDirective);
+
+  @ViewChild('textTpl', { static: true })
+  textTpl?: TemplateRef<unknown>;
+
+  ngOnInit(): void {
+    this.option._setTextTemplate(this.textTpl ?? null);
+  }
+}

package/src/lib/components/forms/components/select/components/native-select/stories/components/index.ts

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

package/src/lib/components/forms/components/select/components/native-select/stories/components/native-select-storybook.component.ts

@@ -0,0 +1,31 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NativeSelectImports } from '../../native-select.imports';
+
+@Component({
+  selector: 'et-sb-native-select',
+  template: `
+    <et-select-field [formControl]="fg">
+      <et-label>Native Select</et-label>
+
+      <et-native-select>
+        <et-native-select-option disabled hidden>Please choose</et-native-select-option>
+
+        <et-native-select-option value="string">String</et-native-select-option>
+        <et-native-select-option [value]="true">Boolean</et-native-select-option>
+        <et-native-select-option [value]="2">Number 2</et-native-select-option>
+        <et-native-select-option [value]="undefined">Undefined</et-native-select-option>
+      </et-native-select>
+    </et-select-field>
+
+    <pre> {{ fg.value | json }} </pre>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [NativeSelectImports, ReactiveFormsModule, JsonPipe],
+})
+export class StorybookNativeSelectComponent {
+  fg = new FormControl(null);
+}

package/src/lib/components/forms/components/select/components/native-select/stories/native-select.component.stories.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+import { provideValidatorErrorsService } from '../../../../../services';
+import { StorybookNativeSelectComponent } from './components';
+import CustomMDXDocumentation from './native-select.docs.mdx';
+
+export default {
+  title: 'CDK/Forms/Select/Native',
+  component: StorybookNativeSelectComponent,
+  decorators: [
+    applicationConfig({
+      providers: [provideValidatorErrorsService()],
+    }),
+  ],
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+} as Meta<StorybookNativeSelectComponent>;
+
+export const Default: StoryObj<StorybookNativeSelectComponent> = {};

package/src/lib/components/forms/components/select/components/native-select/stories/native-select.docs.mdx

@@ -0,0 +1,28 @@
+# Native select
+
+The native select component is a wrapper around the browser's native select element. It is used to select one option from a list of options.
+For native selects there is no way to detect if the menu is open or closed.
+Imported by adding the `NativeSelectImports` array to the `imports` array of your standalone component.
+
+Unlike the regular select, the native select component does not transform the option values to strings.
+
+## Usage
+
+```html
+<et-select-field [formControl]="fg">
+  <et-label>Native Select</et-label>
+
+  <et-native-select>
+    <et-native-select-option value="string">String</et-native-select-option>
+    <et-native-select-option [value]="true">Boolean</et-native-select-option>
+    <et-native-select-option [value]="2">Number 2</et-native-select-option>
+    <et-native-select-option [value]="undefined">Undefined</et-native-select-option>
+  </et-native-select>
+</et-select-field>
+```
+
+## Adding a classic "Please choose" option
+
+```html
+<et-native-select-option disabled hidden>Please choose</et-native-select-option>
+```

package/src/lib/components/forms/components/select/components/select/components/select/select.component.html

@@ -0,0 +1,65 @@
+<ng-content select="[etInputPrefix]" />
+
+<div class="et-select-wrapper">
+  <div
+    #inputElement
+    [attr.id]="input.id"
+    [attr.aria-labelledby]="select.labelledBy$ | async"
+    [attr.aria-describedby]="input.describedBy$ | async"
+    [attr.tabindex]="(input.disabled$ | async) ? -1 : 0"
+    [attr.aria-required]="(input.required$ | async) || null"
+    [attr.aria-disabled]="(input.disabled$ | async) || null"
+    [attr.aria-invalid]="(input.invalid$ | async) || null"
+    [attr.aria-controls]="(select.selectBodyId$ | async) || null"
+    [attr.aria-owns]="(select.owns$ | async) || null"
+    [attr.aria-expanded]="select.isOpen$ | async"
+    [attr.aria-activedescendant]="select.activeDescendant$ | async"
+    (click)="select.open()"
+    (keydown)="select._processKeydownEvent($event)"
+    (blur)="select._controlTouched()"
+    class="et-select-input et-select-input--static"
+    aria-haspopup="listbox"
+    role="combobox"
+    aria-autocomplete="none"
+  >
+    <span
+      [attr.id]="select.selectCurrentValueId"
+      [class.cdk-visually-hidden]="select._selectionModel.allowMultiple && select.ariaViewValue()"
+      class="et-select-current-value"
+    >
+      @if (select.ariaViewValue()) {
+        {{ select.ariaViewValue() }}
+      } @else {
+        {{ select.emptyText }}
+      }
+    </span>
+
+    @if (select._selectionModel.allowMultiple) {
+      @if (select._selectionModel.selection$ | async; as selectedOptions) {
+        @if (selectedOptions.length) {
+          <ul class="et-select-selected-options" aria-hidden="true">
+            @for (opt of selectedOptions; track select.trackByFn($index, opt)) {
+              <li class="et-select-selected-option">
+                {{ opt.viewValue$ | async }}
+                <button
+                  (click)="$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()"
+                  class="et-select-selected-option-remove"
+                  tabindex="-1"
+                  type="button"
+                ></button>
+              </li>
+            }
+          </ul>
+        }
+      }
+    }
+  </div>
+
+  <et-chevron-icon class="et-select-chevron" />
+</div>
+
+<ng-content select="[etInputSuffix]" />
+
+<ng-template #selectBodyTpl>
+  <ng-content />
+</ng-template>

package/src/lib/components/forms/components/select/components/select/components/select/select.component.scss

@@ -0,0 +1,42 @@
+.et-select {
+  display: block;
+  border: 1px solid #ccc;
+  padding: 15px 15px;
+  position: relative;
+}
+
+.et-select-input {
+  position: absolute;
+  inset: 0;
+}
+
+.et-select-option {
+  display: block;
+}
+
+.et-select-chevron {
+  transform: rotate(180deg);
+  display: block;
+  inline-size: 15px;
+  block-size: 15px;
+  position: absolute;
+  inset-inline-end: 15px;
+  inset-block-start: 7px;
+}
+
+.et-select-option--active {
+  background-color: #1f1f1f;
+}
+
+.et-select-option--selected {
+  font-weight: 700;
+}
+
+.et-select-selected-options {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 5px;
+}

package/src/lib/components/forms/components/select/components/select/components/select/select.component.ts

@@ -0,0 +1,43 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
+import { LetDirective } from '@ethlete/core';
+import { ChevronIconComponent } from '../../../../../../../icons/chevron-icon';
+import { InputDirective } from '../../../../../../directives/input';
+import { NativeInputRefDirective } from '../../../../../../directives/native-input-ref';
+import { DecoratedInputBase } from '../../../../../../utils';
+import { SELECT_TOKEN, SelectDirective } from '../../directives/select';
+import { SelectBodyComponent } from '../../partials/select-body';
+
+@Component({
+  selector: 'et-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-select',
+  },
+  imports: [NativeInputRefDirective, AsyncPipe, ChevronIconComponent, LetDirective],
+  hostDirectives: [{ directive: InputDirective }, { directive: SelectDirective, inputs: ['multiple', 'emptyText'] }],
+})
+export class SelectComponent extends DecoratedInputBase implements AfterViewInit {
+  protected readonly select = inject<SelectDirective<SelectBodyComponent>>(SELECT_TOKEN);
+
+  @ViewChild('selectBodyTpl')
+  selectBodyTpl: TemplateRef<unknown> | null = null;
+
+  ngAfterViewInit(): void {
+    if (!this.selectBodyTpl) return;
+
+    this.select.setSelectBody({ component: SelectBodyComponent, template: this.selectBodyTpl });
+  }
+}

package/src/lib/components/forms/components/select/components/select/directives/select/select.directive.ts

@@ -0,0 +1,407 @@
+import { A, BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
+import { ComponentType } from '@angular/cdk/portal';
+import {
+  ContentChildren,
+  Directive,
+  ElementRef,
+  InjectionToken,
+  Input,
+  OnInit,
+  TemplateRef,
+  TrackByFunction,
+  ViewChild,
+  booleanAttribute,
+  inject,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import {
+  ActiveSelectionModel,
+  AnimatedOverlayComponentBase,
+  AnimatedOverlayDirective,
+  SelectionModel,
+  TypedQueryList,
+  createDestroy,
+  scrollToElement,
+  signalClasses,
+  signalHostClasses,
+} from '@ethlete/core';
+import { THEME_PROVIDER } from '@ethlete/theming';
+import { BehaviorSubject, combineLatest, debounceTime, map, of, switchMap, takeUntil, tap } from 'rxjs';
+import { OverlayCloseBlockerDirective } from '../../../../../../../overlay/directives/overlay-close-auto-blocker';
+import { INPUT_TOKEN } from '../../../../../../directives/input';
+import { SELECT_FIELD_TOKEN } from '../../../../directives/select-field';
+import { SelectKeyHandlerResult } from '../../private';
+import { SelectBodyDirective } from '../select-body';
+import { SELECT_OPTION_TOKEN, SelectOptionDirective } from '../select-option';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const SELECT_TOKEN = new InjectionToken<SelectDirective<any>>('ET_SELECT_INPUT_TOKEN');
+
+type SelectDirectiveBodyComponentBase = AnimatedOverlayComponentBase & {
+  _bodyTemplate: TemplateRef<unknown> | null;
+  _containerElementRef: ElementRef<HTMLElement> | null | undefined;
+  selectBody: SelectBodyDirective;
+};
+
+let uniqueId = 0;
+
+interface SelectBodyConfig<T extends SelectDirectiveBodyComponentBase> {
+  component: ComponentType<T>;
+  template: TemplateRef<unknown>;
+}
+
+@Directive({
+  standalone: true,
+  hostDirectives: [AnimatedOverlayDirective, OverlayCloseBlockerDirective],
+  providers: [
+    {
+      provide: SELECT_TOKEN,
+      useExisting: SelectDirective,
+    },
+  ],
+})
+export class SelectDirective<T extends SelectDirectiveBodyComponentBase> implements OnInit {
+  private _selectBodyConfig: SelectBodyConfig<T> | null = null;
+
+  private readonly _animatedOverlay = inject<AnimatedOverlayDirective<T>>(AnimatedOverlayDirective);
+  private readonly _destroy$ = createDestroy();
+  private readonly _selectField = inject(SELECT_FIELD_TOKEN);
+  private readonly _themeProvider = inject(THEME_PROVIDER, { optional: true });
+
+  readonly input = inject(INPUT_TOKEN);
+
+  private readonly _selectBodyId$ = new BehaviorSubject<string | null>(null);
+  private readonly _isOpen$ = new BehaviorSubject(false);
+
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly _selectionModel = new SelectionModel<SelectOptionDirective>();
+  readonly _activeSelectionModel = new ActiveSelectionModel<SelectOptionDirective>();
+
+  @Input()
+  set multiple(value: unknown) {
+    this._selectionModel.setAllowMultiple(booleanAttribute(value));
+  }
+
+  @Input()
+  emptyText?: string;
+
+  @ContentChildren(SELECT_OPTION_TOKEN, { descendants: true })
+  private set _selectOptionsQueryList(value: TypedQueryList<SelectOptionDirective>) {
+    this._selectOptionsQueryList$.next(value);
+  }
+  private readonly _selectOptionsQueryList$ = new BehaviorSubject<TypedQueryList<SelectOptionDirective> | null>(null);
+
+  readonly selectBodyId$ = this._selectBodyId$.asObservable();
+  readonly isOpen$ = this._isOpen$.asObservable();
+  readonly isOpen = toSignal(this.isOpen$);
+  readonly multiple$ = this._selectionModel.allowMultiple$;
+
+  readonly selectCurrentValueId = `et-select-current-value-${uniqueId++}`;
+
+  readonly ariaViewValue$ = this._selectionModel.selection$.pipe(
+    switchMap((options) => {
+      if (!options?.length) return of(null);
+
+      const viewValues = options.map((option) => option.viewValue$);
+
+      return combineLatest(viewValues);
+    }),
+    map((viewValues) => {
+      if (!viewValues) return null;
+
+      return viewValues.join(', ');
+    }),
+  );
+
+  readonly ariaViewValue = toSignal(this.ariaViewValue$);
+
+  readonly activeDescendant$ = combineLatest([this.isOpen$, this._activeSelectionModel.activeOption$]).pipe(
+    map(([isOpen, activeOption]) => {
+      if (!isOpen || !activeOption) return null;
+
+      return activeOption.id;
+    }),
+  );
+
+  readonly owns$ = combineLatest([this.isOpen$, this.selectBodyId$]).pipe(
+    map(([isOpen, selectBodyId]) => {
+      if (!isOpen || !selectBodyId) {
+        return null;
+      }
+
+      return selectBodyId;
+    }),
+  );
+
+  readonly labelledBy$ = this.input.labelId$.pipe(
+    map((labelId) => {
+      const ids = [labelId, this.selectCurrentValueId];
+
+      return ids.filter((id) => !!id).join(' ');
+    }),
+  );
+
+  readonly hostClassBindings = signalHostClasses({
+    'et-select--is-open': this.isOpen,
+    'et-select--disabled': toSignal(this.input.disabled$),
+  });
+
+  readonly fieldHostClassBindings = signalClasses(this._selectField.elementRef, {
+    'et-select-field--open': this.isOpen,
+    'et-select-field--multiple': toSignal(this.multiple$),
+  });
+
+  @ViewChild('inputElement')
+  inputElement: ElementRef<HTMLElement> | null = null;
+
+  constructor() {
+    this._animatedOverlay.placement = 'bottom';
+    this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
+    this._animatedOverlay.autoResize = true;
+
+    this.input._setEmptyHelper(this.ariaViewValue$);
+
+    this._selectionModel
+      .setOptionsFromQueryList$(this._selectOptionsQueryList$)
+      .setLabelBinding((v) => v.viewValue)
+      .setValueBinding((v) => v.value)
+      .setDisabledBinding((v) => v.disabled);
+
+    this._activeSelectionModel.setSelectionModel(this._selectionModel);
+  }
+
+  ngOnInit(): void {
+    this._closeBodyOnDisable();
+
+    this._selectionModel.setSelectionFromValue$(this.input.value);
+
+    this._selectionModel.value$
+      .pipe(
+        takeUntil(this._destroy$),
+        tap((value) => this.input._updateValue(value)),
+      )
+      .subscribe();
+
+    this.input.onExternalUpdate$
+      .pipe(
+        takeUntil(this._destroy$),
+        tap(() => this._selectionModel.setSelectionFromValue$(this.input.value)),
+      )
+      .subscribe();
+  }
+
+  trackByFn: TrackByFunction<SelectOptionDirective> = (_, item) => item.id;
+
+  open() {
+    if (!this._selectBodyConfig) return;
+
+    if (this._animatedOverlay.isMounted || this.input.disabled) return;
+
+    const instance = this._animatedOverlay.mount({
+      component: this._selectBodyConfig.component,
+      mirrorWidth: true,
+      themeProvider: this._themeProvider,
+      data: { _bodyTemplate: this._selectBodyConfig.template } as Partial<T>,
+    });
+
+    if (!instance) return;
+
+    this._selectBodyId$.next(instance.selectBody.id);
+    this._isOpen$.next(true);
+
+    this._activeSelectionModel.activeOption$
+      .pipe(
+        debounceTime(0),
+        tap((activeOption) => {
+          if (!activeOption) return;
+
+          scrollToElement({
+            container: instance._containerElementRef?.nativeElement,
+            element: activeOption._elementRef.nativeElement,
+            behavior: 'instant',
+          });
+        }),
+        takeUntil(this._destroy$),
+        takeUntil(this._animatedOverlay.afterClosed()),
+      )
+      .subscribe();
+
+    this._animatedOverlay
+      .afterClosed()
+      .pipe(
+        takeUntil(this._destroy$),
+        tap(() => {
+          this._selectBodyId$.next(null);
+          this._isOpen$.next(false);
+        }),
+      )
+      .subscribe();
+  }
+
+  close() {
+    if (!this._animatedOverlay.isMounted) return;
+
+    this._animatedOverlay.unmount();
+  }
+
+  writeValueFromOption(option: SelectOptionDirective) {
+    this.input._markAsTouched();
+
+    if (this._selectionModel.allowMultiple) {
+      this._selectionModel.toggleSelectedOption(option);
+    } else {
+      this._selectionModel.addSelectedOption(option);
+    }
+
+    if (!this._selectionModel.allowMultiple) {
+      this.close();
+    }
+  }
+
+  focus() {
+    this.inputElement?.nativeElement.focus();
+  }
+
+  setSelectBody(config: SelectBodyConfig<T>) {
+    this._selectBodyConfig = config;
+  }
+
+  removeOptionFromSelection(option: SelectOptionDirective) {
+    this._selectionModel.removeSelectedOption(option);
+  }
+
+  _controlTouched() {
+    this.input._markAsTouched();
+    this.input._setShouldDisplayError(true);
+  }
+
+  _processKeydownEvent(event: KeyboardEvent) {
+    const keyCode = event.keyCode;
+    const isOpen = this.isOpen();
+    const isMultiple = this._selectionModel.allowMultiple;
+    const selection = this._selectionModel.selection;
+    const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
+    const isAltPressed = hasModifierKey(event, 'altKey');
+
+    const result: SelectKeyHandlerResult<SelectOptionDirective> = {};
+
+    if (isArrowKey && isAltPressed && !isOpen) {
+      result.overlayOperation = 'open';
+      return this._interpretKeyHandlerResult(result);
+    }
+
+    if (keyCode === ENTER) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const activeOption = this._activeSelectionModel.activeOption;
+
+      if (activeOption && this._selectionModel.isDisabled(activeOption)) return;
+
+      if (activeOption) {
+        if (isMultiple) {
+          result.optionAction = { type: 'toggle', option: activeOption };
+        } else {
+          result.optionAction = { type: 'add', option: activeOption };
+        }
+      }
+
+      if (!isMultiple) {
+        result.overlayOperation = 'close';
+      }
+
+      return this._interpretKeyHandlerResult(result);
+    }
+
+    if (keyCode === ESCAPE) {
+      if (isOpen) {
+        result.overlayOperation = 'close';
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      return this._interpretKeyHandlerResult(result);
+    }
+
+    if (keyCode === TAB) {
+      result.overlayOperation = 'close';
+      return this._interpretKeyHandlerResult(result);
+    }
+
+    if (keyCode === BACKSPACE) {
+      const lastSelectedOption = selection[selection.length - 1];
+
+      if (isMultiple && lastSelectedOption) {
+        result.optionAction = { type: 'remove', option: lastSelectedOption };
+        return this._interpretKeyHandlerResult(result);
+      }
+    }
+
+    if (keyCode === SPACE) {
+      result.overlayOperation = 'open';
+
+      return this._interpretKeyHandlerResult(result);
+    }
+
+    const newActiveOption = this._activeSelectionModel.evaluateKeyboardEvent(event, { skipDisabled: !isOpen });
+
+    if (newActiveOption && !isOpen && !isMultiple) {
+      result.optionAction = { type: 'add', option: newActiveOption };
+    }
+
+    if (keyCode === A && event.ctrlKey && isMultiple) {
+      result.optionAction = 'toggleAll';
+      event.preventDefault();
+    }
+
+    return this._interpretKeyHandlerResult(result);
+  }
+
+  private _interpretKeyHandlerResult(result: SelectKeyHandlerResult<SelectOptionDirective>) {
+    if (result.overlayOperation === 'close') {
+      this.close();
+    } else if (result.overlayOperation === 'open') {
+      this.open();
+    }
+
+    if (result.optionAction) {
+      if (typeof result.optionAction === 'string') {
+        if (result.optionAction === 'clear') {
+          this._selectionModel.clearSelectedOptions();
+        } else if (result.optionAction === 'toggleAll') {
+          this._selectionModel.toggleAllSelectedOptions();
+        }
+      } else {
+        const { type, option } = result.optionAction;
+
+        if (this._selectionModel.isDisabled(option)) return;
+
+        if (type === 'add') {
+          this._selectionModel.addSelectedOption(option);
+        }
+
+        if (type === 'remove') {
+          this._selectionModel.removeSelectedOption(option);
+        }
+
+        if (type === 'toggle') {
+          this._selectionModel.toggleSelectedOption(option);
+        }
+      }
+    }
+  }
+
+  private _closeBodyOnDisable() {
+    this.input.disabled$
+      .pipe(
+        tap((disabled) => {
+          if (!disabled) return;
+
+          this.close();
+        }),
+        takeUntil(this._destroy$),
+      )
+      .subscribe();
+  }
+}