@ethlete/cdk 4.28.0 → 4.28.1

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

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

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

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

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

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

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

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

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

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

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

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