feat: queries

Author: HitkoDev

packages/demo/src/app/dropzone-wrapper/examples/sandbox/sandbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core'
+import { Component, ViewEncapsulation, viewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 // eslint-disable-next-line @import/no-extraneous-dependencies
 import Dropzone from 'dropzone'
@@ -27,8 +27,8 @@ export class SandboxComponent {
         maxFiles: 1
     }
 
-    @ViewChild(DropzoneComponent) componentRef?: DropzoneComponent
-    @ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective
+    readonly componentRef = viewChild(DropzoneComponent)
+    readonly directiveRef = viewChild(DropzoneDirective)
 
     onUploadInit(dz: Dropzone) {
         console.log('onUploadInit:', dz)
@@ -51,10 +51,12 @@ export class SandboxComponent {
     }
 
     resetDropzone(): void {
-        if (this.type === 'directive' && this.directiveRef) {
-            this.directiveRef.reset()
-        } else if (this.type === 'component' && this.componentRef && this.componentRef.directiveRef) {
-            this.componentRef.directiveRef.reset()
+        const directiveRef = this.directiveRef()
+        const componentRef = this.componentRef()
+        if (this.type === 'directive' && directiveRef) {
+            directiveRef.reset()
+        } else if (this.type === 'component' && componentRef && componentRef.directiveRef) {
+            componentRef.directiveRef.reset()
         }
     }
 

packages/dropzone-wrapper/src/lib/dropzone.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @angular-eslint/no-output-rename */
-import { Component, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation, input } from '@angular/core'
+import { Component, EventEmitter, OnInit, Output, ViewEncapsulation, input, viewChild } from '@angular/core'
 import { DropzoneDirective } from './dropzone.directive'
 import { DropzoneConfig, DropzoneListeners, NXT_DROPZONE_LISTENERS } from './dropzone.interfaces'
 
@@ -79,7 +79,7 @@ export class DropzoneComponent implements OnInit, DropzoneListeners {
 
     @Output('queueComplete') readonly DZ_QUEUECOMPLETE = new EventEmitter<void>()
 
-    @ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective
+    readonly directiveRef = viewChild(DropzoneDirective)
 
     constructor() { }
 

packages/pick-datetime/src/lib/date-time/calendar-month-view/calendar-month-view.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, OnDestroy, OnInit, Output, ViewChild, input } from '@angular/core'
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, OnDestroy, OnInit, Output, input, viewChild } from '@angular/core'
 import { Subscription } from 'rxjs'
 import { DateTimeAdapter } from '../../class/date-time-adapter.class'
 import { DateTimeFormats, NXT_DATE_TIME_FORMATS } from '../../class/date-time-format.class'
@@ -243,8 +243,7 @@ export class MonthViewComponent<T> implements OnInit, AfterContentInit, OnDestro
     readonly pickerMomentChange = new EventEmitter<T>()
 
     /** The body of calendar table */
-    @ViewChild(CalendarBodyComponent, { static: true })
-    private calendarBodyElm?: CalendarBodyComponent
+    private readonly calendarBodyElm = viewChild(CalendarBodyComponent)
 
     /** @internal */
     @HostBinding('class.nxt-dt-calendar-view')
@@ -595,6 +594,6 @@ export class MonthViewComponent<T> implements OnInit, AfterContentInit, OnDestro
     }
 
     private focusActiveCell() {
-        this.calendarBodyElm?.focusActiveCell()
+        this.calendarBodyElm()?.focusActiveCell()
     }
 }

packages/pick-datetime/src/lib/date-time/calendar-multi-year-view/calendar-multi-year-view.component.ts

@@ -1,7 +1,7 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnInit, Output, viewChild } from '@angular/core'
 import { DateTimeAdapter } from '../../class/date-time-adapter.class'
 import { DateFilter, SelectMode } from '../../class/date-time.class'
-import { CalendarCell, CalendarBodyComponent } from '../calendar-body/calendar-body.component'
+import { CalendarBodyComponent, CalendarCell } from '../calendar-body/calendar-body.component'
 import { DateTimeIntl } from '../date-time-picker-intl.service'
 
 /** @internal */
@@ -206,8 +206,7 @@ export class MultiYearViewComponent<T> implements OnInit, AfterContentInit {
     readonly keyboardEnter = new EventEmitter<void>()
 
     /** The body of calendar table */
-    @ViewChild(CalendarBodyComponent, { static: true })
-    private calendarBodyElm?: CalendarBodyComponent
+    private readonly calendarBodyElm = viewChild(CalendarBodyComponent)
 
     /** @internal */
     @HostBinding('class.nxt-dt-calendar-view')
@@ -446,6 +445,6 @@ export class MultiYearViewComponent<T> implements OnInit, AfterContentInit {
     }
 
     private focusActiveCell() {
-        this.calendarBodyElm?.focusActiveCell()
+        this.calendarBodyElm()?.focusActiveCell()
     }
 }

packages/pick-datetime/src/lib/date-time/calendar-year-view/calendar-year-view.component.ts

@@ -1,9 +1,9 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, OnDestroy, OnInit, Output, viewChild } from '@angular/core'
 import { Subscription } from 'rxjs'
 import { DateTimeAdapter } from '../../class/date-time-adapter.class'
 import { DateTimeFormats, NXT_DATE_TIME_FORMATS } from '../../class/date-time-format.class'
 import { DateFilter, SelectMode } from '../../class/date-time.class'
-import { CalendarCell, CalendarBodyComponent } from '../calendar-body/calendar-body.component'
+import { CalendarBodyComponent, CalendarCell } from '../calendar-body/calendar-body.component'
 
 /** @internal */
 const MONTHS_PER_YEAR = 12
@@ -196,8 +196,7 @@ export class YearViewComponent<T> implements OnInit, AfterContentInit, OnDestroy
     readonly keyboardEnter = new EventEmitter<void>()
 
     /** The body of calendar table */
-    @ViewChild(CalendarBodyComponent, { static: true })
-    private calendarBodyElm?: CalendarBodyComponent
+    private readonly calendarBodyElm = viewChild(CalendarBodyComponent)
 
     /** @internal */
     @HostBinding('class.nxt-dt-calendar-view')
@@ -515,6 +514,6 @@ export class YearViewComponent<T> implements OnInit, AfterContentInit, OnDestroy
     }
 
     private focusActiveCell() {
-        this.calendarBodyElm?.focusActiveCell()
+        this.calendarBodyElm()?.focusActiveCell()
     }
 }

packages/pick-datetime/src/lib/date-time/date-time-inline/date-time-inline.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, HostBinding, Inject, Input, OnInit, Output, Provider, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, HostBinding, Inject, Input, OnInit, Output, Provider, viewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DateTimeAdapter } from '../../class/date-time-adapter.class'
 import { DateTimeFormats, NXT_DATE_TIME_FORMATS } from '../../class/date-time-format.class'
@@ -25,8 +25,7 @@ export const NXT_DATETIME_VALUE_ACCESSOR: Provider = {
 })
 export class DateTimeInlineComponent<T> extends DateTimeDirective<T> implements OnInit, ControlValueAccessor {
 
-    @ViewChild(DateTimeContainerComponent, { static: true })
-    private container?: DateTimeContainerComponent<T>
+    private readonly container = viewChild(DateTimeContainerComponent)
 
     private _pickerType: PickerType = 'both'
     /**
@@ -261,21 +260,24 @@ export class DateTimeInlineComponent<T> extends DateTimeDirective<T> implements
     }
 
     ngOnInit() {
-        if (this.container)
-            this.container.picker = this
+        const container = this.container()
+        if (container)
+            container.picker = this
     }
 
     writeValue(value: any): void {
         value = value ?? undefined
         if (this.isInSingleMode) {
             this.value = value
-            if (this.container)
-                this.container.pickerMoment = value
+            const container = this.container()
+            if (container)
+                container.pickerMoment = value
         } else {
             this.values = value
-            if (this.container)
-                this.container.pickerMoment = this._values?.[
-                    this.container.activeSelectedIndex
+            const container = this.container()
+            if (container)
+                container.pickerMoment = this._values?.[
+                    container.activeSelectedIndex
                 ]
         }
     }

packages/pick-datetime/src/lib/date-time/date-time-picker-container/date-time-picker-container.component.ts

@@ -1,5 +1,5 @@
 import { AnimationEvent } from '@angular/animations'
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, OnInit, ViewChild } from '@angular/core'
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, OnInit, viewChild } from '@angular/core'
 import { Subject } from 'rxjs'
 import { CdkTrapFocus } from '@angular/cdk/a11y'
 import { NgClass } from '@angular/common'
@@ -30,11 +30,9 @@ import { dateTimePickerAnimations } from './date-time-picker-container.animation
 })
 export class DateTimeContainerComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
 
-    @ViewChild(CalendarComponent)
-    calendar?: CalendarComponent<T>
+    readonly calendar = viewChild(CalendarComponent)
 
-    @ViewChild(TimerComponent)
-    timer?: TimerComponent<T>
+    readonly timer = viewChild(TimerComponent)
 
     picker?: DateTimeDirective<T>
     activeSelectedIndex = 0 // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
@@ -464,10 +462,12 @@ export class DateTimeContainerComponent<T> implements OnInit, AfterContentInit,
             return
         }
 
-        if (this.calendar) {
-            this.calendar.focusActiveCell()
-        } else if (this.timer) {
-            this.timer.focus()
+        const calendar = this.calendar()
+        const timer = this.timer()
+        if (calendar) {
+            calendar.focusActiveCell()
+        } else if (timer) {
+            timer.focus()
         }
     }
 }