resizable

1import { DOCUMENT, isPlatformBrowser } from '@angular/common';
2import {
3  type AfterContentInit,
4  booleanAttribute,
5  ChangeDetectionStrategy,
6  Component,
7  computed,
8  contentChildren,
9  ElementRef,
10  inject,
11  input,
12  type OnDestroy,
13  output,
14  PLATFORM_ID,
15  signal,
16  ViewEncapsulation,
17} from '@angular/core';
18 
19import type { ClassValue } from 'clsx';
20 
21import { ZardResizablePanelComponent } from '@/shared/components/resizable/resizable-panel.component';
22import { resizableVariants, type ZardResizableLayoutVariants } from '@/shared/components/resizable/resizable.variants';
23import { mergeClasses } from '@/shared/utils/merge-classes';
24 
25export interface ZardResizeEvent {
26  sizes: number[];
27  layout: 'horizontal' | 'vertical';
28}
29 
30@Component({
31  selector: 'z-resizable, [z-resizable]',
32  template: `
33    <ng-content />
34  `,
35  changeDetection: ChangeDetectionStrategy.OnPush,
36  encapsulation: ViewEncapsulation.None,
37  host: {
38    'data-slot': 'resizable-panel-group',
39    '[attr.data-group]': 'true',
40    '[class]': 'classes()',
41    '[attr.aria-orientation]': 'zLayout()',
42  },
43  exportAs: 'zResizable',
44})
45export class ZardResizableComponent implements AfterContentInit, OnDestroy {
46  private readonly elementRef = inject(ElementRef);
47  private readonly platformId = inject(PLATFORM_ID);
48  private readonly document = inject(DOCUMENT);
49 
50  private readonly isBrowser = isPlatformBrowser(this.platformId);
51  private readonly isResizing = signal(false);
52  private listenersCleanup!: () => void | undefined;
53 
54  readonly zLayout = input<ZardResizableLayoutVariants>('horizontal');
55  readonly zLazy = input(false, { transform: booleanAttribute });
56  readonly class = input<ClassValue>('');
57 
58  readonly zResizeStart = output<ZardResizeEvent>();
59  readonly zResize = output<ZardResizeEvent>();
60  readonly zResizeEnd = output<ZardResizeEvent>();
61 
62  readonly panels = contentChildren(ZardResizablePanelComponent);
63  readonly panelSizes = signal<number[]>([]);
64  protected readonly activeHandleIndex = signal<number | null>(null);
65  protected readonly classes = computed(() =>
66    mergeClasses(resizableVariants({ zLayout: this.zLayout() }), this.class()),
67  );
68 
69  ngAfterContentInit(): void {
70    this.initializePanelSizes();
71  }
72 
73  ngOnDestroy(): void {
74    this.listenersCleanup?.();
75  }
76 
77  convertToPercentage(value: number | string, containerSize: number): number {
78    if (typeof value === 'number') {
79      return value;
80    }
81 
82    if (typeof value === 'string') {
83// … truncated