All files / src/lib/directives collapsable.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @module module:lib/directives/collapsable
 * @description Directive to auto-open accordions when required fields are present.
 * @summary CollapsableDirective inspects a DOM subtree for required inputs and, when found,
 * opens the closest ion-accordion-group to surface validation to the user.
 *
 * @link {@link CollapsableDirective}
 */
import { Directive, ElementRef, inject, OnInit, Injector } from '@angular/core';
 
 
@Directive({
  selector: '[decafCollapsable]',
  standalone: true
})
export class CollapsableDirective implements OnInit{
 
  private element: ElementRef<HTMLElement> = inject(ElementRef);
  private injector = inject(Injector);
  // constructor() {}
 
  ngOnInit() {
    const element = this.element?.nativeElement;
    Iif(element) {
      const requiredFields = element.querySelectorAll('[required]') as NodeListOf<Element>;
      Iif(requiredFields.length) {
        const accordion = element?.closest('ion-accordion-group') as HTMLElement;
        accordion.setAttribute('value', 'open');
      }
    }
  }
 
  // private element: ElementRef<HTMLElement> = inject(ElementRef);
  // private renderer = inject(Renderer2);
 
  // ngOnInit() {
  //   const element = this.element?.nativeElement;
  //   if(element) {
  //     const requiredFields = element.querySelectorAll('[required]') as NodeListOf<Element>;
 
  //     // Find the parent fieldset component and set required attribute if there are required fields
  //     const fieldsetElement = element.closest('ngx-decaf-fieldset');
  //     if (fieldsetElement && requiredFields.length > 0) {
  //       // Set a data attribute that the fieldset component can read
  //       this.renderer.setAttribute(fieldsetElement, 'data-has-required-fields', 'true');
 
  //       // Dispatch a custom event to notify the fieldset component
  //       const event = new CustomEvent('requiredFieldsDetected', {
  //         detail: { hasRequiredFields: true, count: requiredFields.length },
  //         bubbles: true
  //       });
  //       fieldsetElement.dispatchEvent(event);
 
  //       const accordion = element?.closest('ion-accordion-group') as HTMLElement;
  //       if (accordion) {
  //         accordion.setAttribute('value', 'open');
  //       }
  //     }
  //   }
  // }
}