@ethlete/cdk 4.27.1 → 4.28.0

package/src/lib/components/forms/components/segmented-button/directives/segmented-button-field/segmented-button-field.directive.ts

@@ -0,0 +1,42 @@
+import { ContentChildren, Directive, forwardRef, inject, InjectionToken } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Primitive, signalHostClasses, switchQueryListChanges, TypedQueryList } from '@ethlete/core';
+import { BehaviorSubject, combineLatest, map, of, switchMap } from 'rxjs';
+import { InputStateService } from '../../../../services';
+import { SEGMENTED_BUTTON_TOKEN, SegmentedButtonDirective } from '../segmented-button';
+
+export const SEGMENTED_BUTTON_FIELD_TOKEN = new InjectionToken<SegmentedButtonFieldDirective>(
+  'ET_SEGMENTED_BUTTON_FIELD_DIRECTIVE_TOKEN',
+);
+
+@Directive({
+  standalone: true,
+  providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }],
+  exportAs: 'etSegmentedButtonField',
+})
+export class SegmentedButtonFieldDirective {
+  readonly inputState = inject<InputStateService<Primitive>>(InputStateService);
+
+  @ContentChildren(forwardRef(() => SEGMENTED_BUTTON_TOKEN), { descendants: true })
+  set segmentedButton(segmentedButton: TypedQueryList<SegmentedButtonDirective>) {
+    this._segmentedButton$.next(segmentedButton);
+  }
+  private _segmentedButton$ = new BehaviorSubject<TypedQueryList<SegmentedButtonDirective> | null>(null);
+
+  readonly segmentedButtonQueryList$ = this._segmentedButton$.pipe(switchQueryListChanges());
+
+  readonly hostClassBindings = signalHostClasses({
+    'et-segmented-button-field--checked': toSignal(
+      this.segmentedButtonQueryList$.pipe(
+        switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.checked$)) : of([]))),
+        map((checked) => checked.some((value) => value)),
+      ),
+    ),
+    'et-segmented-button-field--disabled': toSignal(
+      this.segmentedButtonQueryList$.pipe(
+        switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.disabled$)) : of([]))),
+        map((disabled) => disabled.some((value) => value)),
+      ),
+    ),
+  });
+}

package/src/lib/components/forms/components/segmented-button/directives/segmented-button-group/segmented-button-group.directive.ts

@@ -0,0 +1,71 @@
+import { AfterContentInit, ContentChildren, Directive, forwardRef, inject, InjectionToken } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { createDestroy, createFlipAnimation, Primitive, signalHostAttributes, TypedQueryList } from '@ethlete/core';
+import { combineLatest, pairwise, startWith, takeUntil, tap } from 'rxjs';
+import { FormGroupStateService, InputStateService } from '../../../../services';
+import { SEGMENTED_BUTTON_TOKEN, SegmentedButtonDirective } from '../segmented-button/segmented-button.directive';
+
+export const SEGMENTED_BUTTON_GROUP_TOKEN = new InjectionToken<SegmentedButtonGroupDirective>(
+  'ET_SEGMENTED_BUTTON_GROUP_DIRECTIVE_TOKEN',
+);
+
+let nextUniqueId = 0;
+
+@Directive({
+  standalone: true,
+  providers: [{ provide: SEGMENTED_BUTTON_GROUP_TOKEN, useExisting: SegmentedButtonGroupDirective }],
+  exportAs: 'etSegmentedButtonGroup',
+  host: {
+    role: 'group',
+  },
+})
+export class SegmentedButtonGroupDirective implements AfterContentInit {
+  private readonly _formGroupStateService = inject(FormGroupStateService);
+  private readonly _inputStateService = inject<InputStateService<Primitive, HTMLButtonElement>>(InputStateService);
+  private readonly _destroy$ = createDestroy();
+
+  readonly name = `et-segmented-button-group-${++nextUniqueId}`;
+
+  readonly hostAttributeBindings = signalHostAttributes({
+    'aria-labelledby': toSignal(this._formGroupStateService.describedBy$),
+  });
+
+  @ContentChildren(forwardRef(() => SEGMENTED_BUTTON_TOKEN), { descendants: true })
+  private _segmentedButtons?: TypedQueryList<SegmentedButtonDirective>;
+
+  ngAfterContentInit(): void {
+    if (!this._segmentedButtons) {
+      return;
+    }
+
+    combineLatest([
+      this._segmentedButtons.changes.pipe(startWith(this._segmentedButtons)),
+      this._inputStateService.value$.pipe(pairwise()),
+    ])
+      .pipe(
+        tap(([buttons, [prevValue, currValue]]) => {
+          const prevActiveIndicator = buttons.find((button) => button?.value === prevValue);
+          const currActiveIndicator = buttons.find((button) => button?.value === currValue);
+
+          if (
+            !prevActiveIndicator ||
+            !currActiveIndicator ||
+            prevActiveIndicator === currActiveIndicator ||
+            !prevActiveIndicator.activeIndicatorElement ||
+            !currActiveIndicator.activeIndicatorElement
+          ) {
+            return;
+          }
+
+          const flip = createFlipAnimation({
+            originElement: prevActiveIndicator.activeIndicatorElement,
+            element: currActiveIndicator.activeIndicatorElement,
+          });
+
+          flip.play();
+        }),
+        takeUntil(this._destroy$),
+      )
+      .subscribe();
+  }
+}

package/src/lib/components/forms/components/segmented-button/segmented-button.imports.ts

@@ -0,0 +1,9 @@
+import { SegmentedButtonComponent } from './components/segmented-button';
+import { SegmentedButtonFieldComponent } from './components/segmented-button-field';
+import { SegmentedButtonGroupComponent } from './components/segmented-button-group';
+
+export const SegmentedButtonImports = [
+  SegmentedButtonComponent,
+  SegmentedButtonFieldComponent,
+  SegmentedButtonGroupComponent,
+] as const;

package/src/lib/components/forms/components/segmented-button/stories/components/index.ts

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

package/src/lib/components/forms/components/segmented-button/stories/components/segmented-button-storybook.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { SegmentedButtonGroupRenderAs } from '../../components/segmented-button-group';
+import { SegmentedButtonImports } from '../../segmented-button.imports';
+
+@Component({
+  selector: 'et-sb-segmented-button',
+  template: `
+    <et-segmented-button-group [formControl]="fg" [renderAs]="renderAs()">
+      <et-segmented-button-field>
+        <et-segmented-button value="1">Value 1</et-segmented-button>
+      </et-segmented-button-field>
+
+      <et-segmented-button-field>
+        <et-segmented-button value="2">segmented-button 2</et-segmented-button>
+      </et-segmented-button-field>
+
+      <et-segmented-button-field>
+        <et-segmented-button value="3" disabled>num 3</et-segmented-button>
+      </et-segmented-button-field>
+    </et-segmented-button-group>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [SegmentedButtonImports, ReactiveFormsModule],
+})
+export class StorybookSegmentedButtonComponent {
+  fg = new FormControl('1');
+
+  renderAs = input<SegmentedButtonGroupRenderAs>('buttons');
+}

package/src/lib/components/forms/components/segmented-button/stories/segmented-button.component.stories.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { applicationConfig, Meta, StoryFn } from '@storybook/angular';
+import { provideValidatorErrorsService } from '../../../services';
+import { StorybookSegmentedButtonComponent } from './components';
+import CustomMDXDocumentation from './segmented-button.docs.mdx';
+
+export default {
+  title: 'CDK/Forms/Segmented Button',
+  component: StorybookSegmentedButtonComponent,
+  decorators: [
+    applicationConfig({
+      providers: [provideValidatorErrorsService()],
+    }),
+  ],
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+  args: {
+    renderAs: 'buttons',
+  },
+  argTypes: {
+    renderAs: {
+      control: {
+        type: 'select',
+      },
+      options: ['buttons', 'tabs'],
+    },
+  },
+} as Meta<StorybookSegmentedButtonComponent>;
+
+const Template: StoryFn<StorybookSegmentedButtonComponent> = (args) => ({
+  props: args,
+});
+
+export const Default = {
+  render: Template,
+};

package/src/lib/components/forms/components/segmented-button/stories/segmented-button.docs.mdx

@@ -0,0 +1,57 @@
+# Segmented Button
+
+A segmented button is a group of buttons that are visually connected. The user can select one of the buttons in the group.
+Import the `SegmentedButtonImports` array into your standalone component.
+
+A segmented button can be dísabled by adding the `disabled` attribute to the `<et-segmented-button>` element.
+If the `formControl` is disabled, all segmented buttons will be disabled regardless of their own disabled attribute.
+
+A segmented button field does **not** contain a `et-label` element. The "label" should be placed inside the `et-segmented-button`.
+
+## Usage
+
+The segmented button group is a dynamic form group. So the `formControl` must be bound on it instead of the segmented button fields.
+
+```html
+<p id="segmentedButtonGroupLabel">Please choose an option:</p>
+
+<et-segmented-button-group [formControl]="fg" aria-labelledby="segmentedButtonGroupLabel">
+  <et-segmented-button-field>
+    <et-segmented-button value="1">Value 1</et-segmented-button>
+  </et-segmented-button-field>
+
+  <et-segmented-button-field>
+    <et-segmented-button value="2">segmented-button 2</et-segmented-button>
+  </et-segmented-button-field>
+
+  <et-segmented-button-field>
+    <et-segmented-button value="3">num 3</et-segmented-button>
+  </et-segmented-button-field>
+</et-segmented-button-group>
+```
+
+## Misc
+
+Below is a list of elements and their conditional classes.
+
+`<et-segmented-button-field>`
+
+#### `et-segmented-button-field--checked`
+
+> Applied when the segmented button is checked.
+
+#### `et-segmented-button-field--disabled`
+
+> Applied when the segmented button is disabled.
+
+---
+
+`<et-segmented-button>`
+
+#### `et-segmented-button--checked`
+
+> Applied when the segmented button is checked.
+
+#### `et-segmented-button--disabled`
+
+> Applied when the segmented button is disabled.

package/src/lib/components/forms/components/select/components/combobox/combobox.imports.ts

@@ -0,0 +1,23 @@
+import { InputPrefixDirective } from '../../../../directives/input-prefix';
+import { InputSuffixDirective } from '../../../../directives/input-suffix';
+import { LabelComponent } from '../../../label/components/label';
+import { SelectFieldComponent } from '../select-field';
+import { ComboboxComponent } from './components/combobox';
+import { ComboboxBodyEmptyTemplateDirective } from './directives/combobox-body-empty-template';
+import { ComboboxBodyErrorTemplateDirective } from './directives/combobox-body-error-template';
+import { ComboboxBodyLoadingTemplateDirective } from './directives/combobox-body-loading-template';
+import { ComboboxOptionTemplateDirective } from './directives/combobox-option-template';
+import { ComboboxSelectedOptionTemplateDirective } from './directives/combobox-selected-option-template';
+
+export const ComboboxImports = [
+  ComboboxComponent,
+  SelectFieldComponent,
+  InputPrefixDirective,
+  InputSuffixDirective,
+  LabelComponent,
+  ComboboxOptionTemplateDirective,
+  ComboboxSelectedOptionTemplateDirective,
+  ComboboxBodyErrorTemplateDirective,
+  ComboboxBodyLoadingTemplateDirective,
+  ComboboxBodyEmptyTemplateDirective,
+] as const;

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

@@ -0,0 +1,75 @@
+<ng-content select="[etInputPrefix]" />
+
+<div>
+  @if (combobox.multiple$ | async) {
+    <div class="et-combobox-selected-options">
+      @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {
+        <div class="et-combobox-selected-option" aria-hidden="true">
+          @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {
+            <ng-container *ngTemplateOutlet="customSelectedOptionTpl; context: { option: item }" />
+          } @else {
+            @if (combobox.selectedOptionComponent(); as comp) {
+              <ng-container
+                *ngComponentOutlet="comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)"
+              />
+            } @else {
+              {{ combobox.getOptionLabel(item) | async }}
+            }
+          }
+
+          <button
+            (click)="combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()"
+            class="et-combobox-selected-option-remove"
+            tabindex="-1"
+          >
+            x
+          </button>
+        </div>
+      }
+      <div class="et-combobox-muliple-input">
+        <ng-container *ngTemplateOutlet="inputTpl" />
+      </div>
+    </div>
+  }
+
+  <ng-template #inputTpl>
+    <input
+      [disabled]="input.disabled"
+      [attr.id]="input.id"
+      [attr.aria-required]="(input.required$ | async) || null"
+      [attr.aria-disabled]="(input.disabled$ | async) || null"
+      [attr.aria-invalid]="(input.invalid$ | async) || null"
+      [attr.aria-expanded]="combobox.isOpen$ | async"
+      [attr.aria-describedby]="input.describedBy$ | async"
+      [attr.placeholder]="input.placeholder || null"
+      [attr.aria-activedescendant]="combobox.activeOptionId$ | async"
+      [attr.aria-controls]="(combobox.selectBodyId$ | async) || null"
+      [attr.aria-owns]="(combobox.selectBodyId$ | async) || null"
+      (keydown)="combobox._processKeydownEvent($event)"
+      (keyup)="combobox._processKeyupEvent()"
+      (click)="combobox.open()"
+      (blur)="combobox._handleBlurEvent()"
+      (input)="combobox._processInputEvent($event)"
+      class="et-combobox-wrapper"
+      autocomplete="off"
+      aria-haspopup="listbox"
+      role="combobox"
+      aria-autocomplete="list"
+      type="text"
+      value="{{ combobox.currentFilter }}"
+      etNativeInputRef
+    />
+  </ng-template>
+
+  @if ((combobox.multiple$ | async) === false) {
+    <ng-container *ngTemplateOutlet="inputTpl" />
+  }
+
+  <et-chevron-icon class="et-combobox-chevron" />
+</div>
+
+<ng-content select="[etInputSuffix]" />
+
+<ng-template>
+  <ng-content />
+</ng-template>

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

@@ -0,0 +1,73 @@
+.et-combobox-body.et-with-default-animation {
+  .et-combobox-body-container {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+      transform: scaleY(0);
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 125ms var(--ease-out-5),
+        opacity 125ms var(--ease-out-5);
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 50ms var(--ease-in-5),
+        opacity 50ms var(--ease-in-5);
+    }
+  }
+
+  &[et-floating-placement^='top'] .et-combobox-body-container {
+    transform-origin: bottom;
+  }
+
+  &[et-floating-placement^='bottom'] .et-combobox-body-container {
+    transform-origin: top;
+  }
+}
+
+.et-combobox-body-container {
+  display: block;
+  background-color: #3d3d3d;
+  color: #fff;
+  max-height: min(200px, var(--et-floating-max-height, 200px));
+  overflow: auto;
+
+  @supports (overflow: overlay) {
+    overflow: overlay;
+  }
+}
+
+.et-combobox-body {
+  width: 100%;
+  display: grid;
+  transform: var(--et-floating-translate);
+  will-change: transform;
+}
+
+.et-combobox-option {
+  display: block;
+}
+
+:where(.et-combobox-option--active) {
+  background-color: #1e1e1e;
+}
+
+.et-combobox {
+  display: block;
+  border: 1px solid #ccc;
+  padding: 15px 15px;
+  position: relative;
+}
+
+.et-combobox-chevron {
+  transform: rotate(180deg);
+  display: block;
+  inline-size: 15px;
+  block-size: 15px;
+  position: absolute;
+  inset-inline-end: 15px;
+  inset-block-start: 7px;
+}

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

@@ -0,0 +1,79 @@
+import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
+import { AnimatedOverlayDirective, LetDirective } from '@ethlete/core';
+import { ChevronIconComponent } from '../../../../../../../icons/chevron-icon';
+import { OverlayCloseBlockerDirective } from '../../../../../../../overlay/directives/overlay-close-auto-blocker';
+import { InputDirective } from '../../../../../../directives/input';
+import { NativeInputRefDirective } from '../../../../../../directives/native-input-ref';
+import { DecoratedInputBase } from '../../../../../../utils';
+import { COMBOBOX_TOKEN, ComboboxDirective } from '../../directives/combobox';
+import { ComboboxBodyComponent } from '../../partials/combobox-body';
+
+@Component({
+  selector: 'et-combobox',
+  templateUrl: './combobox.component.html',
+  styleUrls: ['./combobox.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-combobox',
+    '(click)': 'combobox.selectInputAndOpen()',
+  },
+  imports: [
+    NativeInputRefDirective,
+    AsyncPipe,
+    ChevronIconComponent,
+    LetDirective,
+    NgTemplateOutlet,
+    NgComponentOutlet,
+  ],
+  hostDirectives: [
+    AnimatedOverlayDirective,
+    OverlayCloseBlockerDirective,
+    { directive: InputDirective, inputs: ['placeholder'] },
+    {
+      directive: ComboboxDirective,
+      inputs: [
+        'options',
+        'initialValue',
+        'filterInternal',
+        'loading',
+        'error',
+        'emptyText',
+        'placeholder',
+        'multiple',
+        'bindLabel',
+        'bindValue',
+        'bindDisabled',
+        'allowCustomValues',
+        'selectedOptionComponent',
+        'optionComponent',
+        'bodyErrorComponent',
+        'bodyLoadingComponent',
+        'bodyEmptyComponent',
+        'bodyMoreItemsHintComponent',
+        'showBodyMoreItemsHint',
+        'bodyEmptyText',
+        'bodyMoreItemsHintText',
+        'optionComponentInputs',
+        'selectedOptionComponentInputs',
+        'bodyErrorComponentInputs',
+        'bodyLoadingComponentInputs',
+        'bodyEmptyComponentInputs',
+        'bodyMoreItemsHintComponentInputs',
+      ],
+      // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
+      outputs: ['filterChange'],
+    },
+  ],
+})
+export class ComboboxComponent extends DecoratedInputBase {
+  protected readonly combobox = inject(COMBOBOX_TOKEN);
+
+  constructor() {
+    super();
+
+    this.combobox.setBodyComponent(ComboboxBodyComponent);
+  }
+}

package/src/lib/components/forms/components/select/components/combobox/constants/combobox.constants.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { ComboboxConfig } from '../types';
+
+export const COMBOBOX_CONFIG_TOKEN = new InjectionToken<ComboboxConfig>('COMBOBOX_CONFIG_TOKEN');
+
+export const COMBOBOX_DEFAULT_CONFIG = {
+  bodyEmptyText: 'No results found',
+} satisfies ComboboxConfig;