input-group

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  Directive,
6  ElementRef,
7  inject,
8  input,
9  ViewEncapsulation,
10} from '@angular/core';
11 
12import type { ClassValue } from 'clsx';
13 
14import { mergeClasses } from '@/shared/utils/merge-classes';
15 
16import {
17  inputGroupAddonVariants,
18  inputGroupButtonVariants,
19  inputGroupTextVariants,
20  inputGroupVariants,
21  type ZardInputGroupAddonAlignVariants,
22  type ZardInputGroupButtonSizeVariants,
23  type ZardInputGroupButtonVariantVariants,
24} from './input-group.variants';
25 
26@Component({
27  selector: 'z-input-group, [z-input-group]',
28  template: '<ng-content />',
29  changeDetection: ChangeDetectionStrategy.OnPush,
30  encapsulation: ViewEncapsulation.None,
31  host: {
32    role: 'group',
33    'data-slot': 'input-group',
34    '[class]': 'classes()',
35  },
36  exportAs: 'zInputGroup',
37})
38export class ZardInputGroupComponent {
39  readonly class = input<ClassValue>('');
40 
41  protected readonly classes = computed(() => mergeClasses(inputGroupVariants(), this.class()));
42}
43 
44@Component({
45  selector: 'z-input-group-addon, [z-input-group-addon]',
46  template: '<ng-content />',
47  changeDetection: ChangeDetectionStrategy.OnPush,
48  encapsulation: ViewEncapsulation.None,
49  host: {
50    role: 'group',
51    'data-slot': 'input-group-addon',
52    '[attr.data-align]': 'zAlign()',
53    '[class]': 'classes()',
54    '(click)': 'onClick($event)',
55  },
56  exportAs: 'zInputGroupAddon',
57})
58export class ZardInputGroupAddonComponent {
59  private readonly elementRef = inject(ElementRef<HTMLElement>);
60 
61  readonly class = input<ClassValue>('');
62  readonly zAlign = input<ZardInputGroupAddonAlignVariants>('inline-start');
63 
64  protected readonly classes = computed(() =>
65    mergeClasses(inputGroupAddonVariants({ zAlign: this.zAlign() }), this.class()),
66  );
67 
68  protected onClick(event: MouseEvent): void {
69    if ((event.target as HTMLElement).closest('button')) {
70      return;
71    }
72 
73    const control = this.elementRef.nativeElement.parentElement?.querySelector('input, textarea') as HTMLElement | null;
74    control?.focus();
75  }
76}
77 
78@Directive({
79  selector: 'button[z-input-group-button]',
80  host: {
81    type: 'button',
82    'data-slot': 'input-group-button',
83    '[attr.data-size]': 'zSize()',
84    '[class]': 'classes()',
85  },
86  exportAs: 'zInputGroupButton',
87})
88export class ZardInputGroupButtonDirective {
89  readonly class = input<ClassValue>('');
90  readonly zVariant = input<ZardInputGroupButtonVariantVariants>('ghost');
91// … truncated