select

1import {
2  type ConnectedPosition,
3  Overlay,
4  OverlayModule,
5  OverlayPositionBuilder,
6  type OverlayRef,
7} from '@angular/cdk/overlay';
8import { TemplatePortal } from '@angular/cdk/portal';
9import { isPlatformBrowser } from '@angular/common';
10import {
11  afterNextRender,
12  booleanAttribute,
13  ChangeDetectionStrategy,
14  Component,
15  computed,
16  contentChildren,
17  DestroyRef,
18  effect,
19  ElementRef,
20  forwardRef,
21  inject,
22  Injector,
23  input,
24  linkedSignal,
25  model,
26  numberAttribute,
27  type OnDestroy,
28  output,
29  PLATFORM_ID,
30  runInInjectionContext,
31  signal,
32  type TemplateRef,
33  viewChild,
34  ViewContainerRef,
35  ViewEncapsulation,
36} from '@angular/core';
37import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
38import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
39 
40import { NgIcon, provideIcons } from '@ng-icons/core';
41import { lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
42import type { ClassValue } from 'clsx';
43import { filter } from 'rxjs';
44 
45import { ZardBadgeComponent } from '@/shared/components/badge';
46import { ZardSelectGroupComponent } from '@/shared/components/select/select-group.component';
47import { ZardSelectItemComponent } from '@/shared/components/select/select-item.component';
48import {
49  selectContentVariants,
50  selectScrollButtonVariants,
51  selectTriggerVariants,
52  selectVariants,
53  selectViewportVariants,
54  type ZardSelectAlignVariants,
55  type ZardSelectPositionVariants,
56} from '@/shared/components/select/select.variants';
57import { mergeClasses } from '@/shared/utils/merge-classes';
58 
59type OnTouchedType = () => void;
60type OnChangeType = (value: string | string[]) => void;
61 
62const COMPACT_MODE_WIDTH_THRESHOLD = 100;
63let nextSelectId = 0;
64 
65@Component({
66  selector: 'z-select, [z-select]',
67  imports: [OverlayModule, ZardBadgeComponent, NgIcon],
68  template: `
69    <button
70      type="button"
71      role="combobox"
72      data-slot="select-trigger"
73      [class]="triggerClasses()"
74      [disabled]="disabledState()"
75      [attr.aria-controls]="isOpen() ? listboxId : null"
76      [attr.aria-expanded]="isOpen()"
77      [attr.aria-haspopup]="'listbox'"
78      [attr.aria-invalid]="zInvalid() ? 'true' : null"
79      [attr.aria-label]="triggerAriaLabel()"
80      [attr.aria-disabled]="disabledState()"
81      [attr.data-placeholder]="!hasValue() ? '' : null"
82      (blur)="!isOpen() && isFocus.set(false)"
83      (click)="toggle()"
84      (focus)="onFocus()"
85    >
86// … truncated