layout

1import { ChangeDetectionStrategy, Component, computed, contentChildren, input, ViewEncapsulation } from '@angular/core';
2 
3import type { ClassValue } from 'clsx';
4 
5import { layoutVariants, type LayoutVariants } from '@/shared/components/layout/layout.variants';
6import { SidebarComponent } from '@/shared/components/layout/sidebar.component';
7import { mergeClasses } from '@/shared/utils/merge-classes';
8 
9@Component({
10  selector: 'z-layout',
11  template: `
12    <ng-content />
13  `,
14  changeDetection: ChangeDetectionStrategy.OnPush,
15  encapsulation: ViewEncapsulation.None,
16  host: {
17    '[class]': 'classes()',
18  },
19  exportAs: 'zLayout',
20})
21export class LayoutComponent {
22  readonly class = input<ClassValue>('');
23  readonly zDirection = input<LayoutVariants>('auto');
24 
25  // Query for direct sidebar children to auto-detect layout direction
26  private readonly sidebars = contentChildren(SidebarComponent, { descendants: false });
27 
28  private readonly detectedDirection = computed(() => {
29    if (this.zDirection() !== 'auto') {
30      return this.zDirection();
31    }
32 
33    // Auto-detection: Check if there are any sidebar children
34    const hasSidebar = this.sidebars().length > 0;
35    return hasSidebar ? 'horizontal' : 'vertical';
36  });
37 
38  protected readonly classes = computed(() =>
39    mergeClasses(
40      layoutVariants({
41        zDirection: this.detectedDirection(),
42      }),
43      this.class(),
44    ),
45  );
46}