fix(components): added empty initializer for all query list

libs/components/src/lib/components/accordion/accordion.component.ts

@@ -9,7 +9,7 @@ import {
 import { PrizmAccordionItemComponent } from './components/accordion-item/accordion-item.component';
 import { merge } from 'rxjs';
 import { mapTo, takeUntil } from 'rxjs/operators';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 
 @Component({
@@ -23,7 +23,7 @@ import { PrizmAbstractTestId } from '../../abstract/interactive';
 export class PrizmAccordionComponent extends PrizmAbstractTestId implements AfterContentInit {
  @Input() public onlyOneExpanded = false;
  @ContentChildren(PrizmAccordionItemComponent, { descendants: false })
- accordionItems!: QueryList<PrizmAccordionItemComponent>;
+ accordionItems: QueryList<PrizmAccordionItemComponent> = prizmEmptyQueryList();
 
  override readonly testId_ = 'ui_accordion';
 

libs/components/src/lib/components/breadcrumbs/breadcrumbs.component.ts

@@ -16,7 +16,7 @@ import {
 } from '@angular/core';
 import { IBreadcrumb } from './breadcrumb.interface';
 import { animationFrameScheduler, BehaviorSubject, merge, Subject } from 'rxjs';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import { debounceTime, observeOn, takeUntil, tap } from 'rxjs/operators';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { PrizmBreadcrumbDirective } from './breadcrumbs.directive';
@@ -55,8 +55,10 @@ export class PrizmBreadcrumbsComponent<Breadcrumb extends IBreadcrumb>
  @Output() public breadcrumbChange: EventEmitter<Breadcrumb> = new EventEmitter();
  @ViewChild('container', { static: true }) public containerRef!: ElementRef;
  @ViewChild('breadcrumbsFake', { static: true }) public fakeBreadcrumbContainer!: ElementRef;
- @ViewChildren('breadcrumb', { read: ElementRef }) public breadcrumbsList!: QueryList<ElementRef>;
- @ContentChildren(PrizmBreadcrumbDirective) public breadcrumbsItem!: QueryList<PrizmBreadcrumbDirective>;
+ @ViewChildren('breadcrumb', { read: ElementRef }) public breadcrumbsList: QueryList<ElementRef> =
+ prizmEmptyQueryList();
+ @ContentChildren(PrizmBreadcrumbDirective) public breadcrumbsItem: QueryList<PrizmBreadcrumbDirective> =
+ prizmEmptyQueryList();
 
  public breadcrumbs$: BehaviorSubject<Breadcrumb[]> = new BehaviorSubject<Breadcrumb[]>([]);
  public breadcrumbsToShow$: BehaviorSubject<Breadcrumb[]> = new BehaviorSubject<Breadcrumb[]>([]);

libs/components/src/lib/components/grid/grid.component.ts

@@ -1,17 +1,18 @@
 import {
- Component,
- ChangeDetectionStrategy,
- Input,
  AfterContentInit,
+ ChangeDetectionStrategy,
+ Component,
  ContentChildren,
  ElementRef,
+ HostBinding,
+ Input,
  QueryList,
  ViewChild,
- HostBinding,
 } from '@angular/core';
 import { PrizmGridItemComponent } from './components/grid-item/grid-item.component';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { CommonModule } from '@angular/common';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Component({
  selector: 'prizm-grid',
@@ -26,8 +27,12 @@ export class PrizmGridComponent extends PrizmAbstractTestId implements AfterCont
  @Input() public rows = '10';
 
  @ViewChild('container', { static: true }) container!: ElementRef;
- @ContentChildren(PrizmGridItemComponent, { read: ElementRef }) public gridItems!: QueryList<ElementRef>;
- @ContentChildren(PrizmGridItemComponent) public gridItemsData!: QueryList<PrizmGridItemComponent>;
+
+ @ContentChildren(PrizmGridItemComponent, { read: ElementRef })
+ public gridItems: QueryList<ElementRef> = prizmEmptyQueryList();
+
+ @ContentChildren(PrizmGridItemComponent)
+ public gridItemsData: QueryList<PrizmGridItemComponent> = prizmEmptyQueryList();
 
  override readonly testId_ = 'ui-area--grid';
 

libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-items/prizm-navigation-menu-items.component.ts

@@ -17,6 +17,7 @@ import { PRIZM_NAVIGATION_MENU_CHILDREN_HANDLER, PrizmNavigationMenuChildrenHand
 import { PrizmAbstractTestId } from '@prizm-ui/core';
 import { PrizmTreeControllerDirective, PrizmTreeModule } from '../../../tree';
 import { NgFor } from '@angular/common';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Component({
  selector: 'prizm-navigation-menu-items',
@@ -29,9 +30,9 @@ import { NgFor } from '@angular/common';
 export class PrizmNavigationMenuItemsComponent<
  T extends { children?: unknown[] }
 > extends PrizmAbstractTestId {
- @ViewChildren(PrizmNavigationMenuItemComponent) private menuItemsList!: QueryList<
+ @ViewChildren(PrizmNavigationMenuItemComponent) private menuItemsList: QueryList<
  PrizmNavigationMenuItemComponent<T>
- >;
+ > = prizmEmptyQueryList();
 
  @Output() itemExpandedChanged = new EventEmitter<{
  item: InternalPrizmNavigationMenuItem<T>;

libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts

@@ -15,7 +15,7 @@ import { PrizmNavigationMenuToolbarService } from '../../services/prizm-navigati
 import { PrizmNavigationMenuService } from '../../services/prizm-navigation-menu.service';
 import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import {
  GroupExpandedChangedEvent,
  ItemExpandedChangedEvent,
@@ -60,7 +60,7 @@ export class PrizmNavigationMenuComponent<
  UserItem extends Omit<PrizmNavigationMenuItem, 'children'> & { children?: UserItem[] }
 > extends PrizmAbstractTestId {
  @ContentChildren(PrizmNavigationMenuGroupComponent)
- menuGroups!: QueryList<PrizmNavigationMenuGroupComponent<UserItem>>;
+ menuGroups: QueryList<PrizmNavigationMenuGroupComponent<UserItem>> = prizmEmptyQueryList();
 
  @Output() homeClicked = new EventEmitter<void>();
  @Output() activeItemChanged = new EventEmitter<UserItem>();

libs/components/src/lib/components/slider/slider.component.ts

@@ -15,7 +15,7 @@ import {
  ViewChildren,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 import { fromEvent, merge, Observable } from 'rxjs';
 import { distinctUntilChanged, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -57,7 +57,8 @@ export class PrizmSliderComponent
 
  @ViewChild('track') scrollbar!: ElementRef<HTMLDivElement>;
 
- @ViewChildren(PrizmSliderCnobComponent) private _cnobs!: QueryList<PrizmSliderCnobComponent>;
+ @ViewChildren(PrizmSliderCnobComponent) private _cnobs: QueryList<PrizmSliderCnobComponent> =
+ prizmEmptyQueryList();
 
  private get cnobs(): Observable<QueryList<PrizmSliderCnobComponent>> {
  return this._cnobs.changes.pipe(startWith(this._cnobs));

libs/components/src/lib/components/splitter/splitter.component.ts

@@ -19,7 +19,7 @@ import { PrizmSplitterOrientation } from './types';
 import { asyncScheduler, BehaviorSubject, fromEvent, merge, Observable } from 'rxjs';
 import { map, observeOn, startWith, switchMap, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 import { PrizmSplitterGutterComponent } from './gutter/gutter.component';
 import { PrizmSplitterAreaComponent } from './area/area.component';
@@ -55,10 +55,11 @@ export class PrizmSplitterComponent extends PrizmAbstractTestId implements After
  @ViewChild('container', { static: true }) private containerElement!: ElementRef<HTMLElement>;
  @ContentChild(PrizmSplitterCustomGutterDirective) customGutter!: PrizmSplitterCustomGutterDirective;
 
- @ContentChildren(PrizmSplitterAreaComponent) splitterAreaQueryList!: QueryList<PrizmSplitterAreaComponent>;
+ @ContentChildren(PrizmSplitterAreaComponent) splitterAreaQueryList: QueryList<PrizmSplitterAreaComponent> =
+ prizmEmptyQueryList();
 
  @ViewChildren(PrizmSplitterGutterComponent)
- splitterGutterQueryList!: QueryList<PrizmSplitterGutterComponent>;
+ splitterGutterQueryList: QueryList<PrizmSplitterGutterComponent> = prizmEmptyQueryList();
 
  override readonly testId_ = 'ui_splitter';
  get gutterElementSize(): number {

libs/components/src/lib/components/stepper/stepper-selector.component.ts

@@ -5,6 +5,7 @@ import { PrizmStepperStepDirective } from './stepper-step.directive';
 import { PrizmAbstractTestId } from '@prizm-ui/core';
 import { CommonModule } from '@angular/common';
 import { PrizmIconComponent } from '../icon/icon.component';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Component({
  selector: 'prizm-stepper-selector',
@@ -28,7 +29,7 @@ export class PrizmStepperSelectorComponent extends PrizmAbstractTestId {
  @Output() selectStep = new EventEmitter<number>();
 
  @ViewChildren(PrizmStepperSelectorItemDirective)
- selectorItems!: QueryList<PrizmStepperSelectorItemDirective>;
+ selectorItems: QueryList<PrizmStepperSelectorItemDirective> = prizmEmptyQueryList();
  override readonly testId_ = 'ui_stepper--selector';
 
  public clickOnStep(index: number): void {

libs/components/src/lib/components/stepper/stepper.component.ts

@@ -15,6 +15,7 @@ import { PrizmStepperStepDirective } from './stepper-step.directive';
 import { PrizmAbstractTestId } from '@prizm-ui/core';
 import { CommonModule } from '@angular/common';
 import { PrizmStepperSelectorComponent } from './stepper-selector.component';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Component({
  selector: 'prizm-stepper',
@@ -40,7 +41,7 @@ export class PrizmStepperComponent extends PrizmAbstractTestId implements AfterC
  @Output() selectStep = new EventEmitter<number>();
 
  @ContentChildren(PrizmStepperStepDirective)
- prizmStepperStepDirectiveQL!: QueryList<PrizmStepperStepDirective>;
+ prizmStepperStepDirectiveQL: QueryList<PrizmStepperStepDirective> = prizmEmptyQueryList();
 
  steps$!: Observable<PrizmStepperStepDirective[]>;
  override readonly testId_ = 'ui_stepper';

libs/components/src/lib/components/table/directives/sort-by.directive.ts

@@ -5,15 +5,14 @@ import { PrizmSortableDirective } from './sortable.directive';
 import { PrizmTableDirective } from './table.directive';
 import { PrizmComparator } from '../table.types';
 import { prizmDefaultProp } from '@prizm-ui/core';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Directive({
  selector: `table[prizmTable][prizmSortBy]`,
 })
 export class PrizmSortByDirective<T extends Partial<Record<keyof T, any>>> {
  @ContentChildren(PrizmSortableDirective, { descendants: true })
- private readonly sortables: QueryList<PrizmSortableDirective<T>> = new QueryList<
- PrizmSortableDirective<T>
- >();
+ private readonly sortables: QueryList<PrizmSortableDirective<T>> = prizmEmptyQueryList();
 
  @Input()
  @prizmDefaultProp()

libs/components/src/lib/components/table/tbody/tbody.component.ts

@@ -17,7 +17,7 @@ import {
 import { CollectionViewer, isDataSource, ListRange } from '@angular/cdk/collections';
 
 import { prizmDefaultProp } from '@prizm-ui/core';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import { BehaviorSubject, isObservable, Observable } from 'rxjs';
 import { switchMap, takeUntil, tap } from 'rxjs/operators';
 import { PolymorphContent } from '../../../directives';
@@ -134,7 +134,7 @@ export class PrizmTbodyComponent<T extends Partial<Record<keyof T, unknown>>>
  readonly row?: PrizmRowDirective<T>;
 
  @ContentChildren(forwardRef(() => PrizmTrComponent))
- readonly rows: QueryList<PrizmTrComponent<T>> = new QueryList<PrizmTrComponent<T>>();
+ readonly rows: QueryList<PrizmTrComponent<T>> = prizmEmptyQueryList();
 
  columnsCount = 0;
  /**

libs/components/src/lib/components/table/th-group/th-group.component.ts

@@ -19,7 +19,7 @@ import { PrizmHeadDirective } from '../directives/head.directive';
 import { PrizmTableDirective } from '../directives/table.directive';
 import { PRIZM_TABLE_PROVIDER } from '../providers/table.provider';
 import { PrizmThComponent } from '../th/th.component';
-import { moveInEventLoopIteration } from '@prizm-ui/helpers';
+import { moveInEventLoopIteration, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import { PrizmTableService } from '../table.service';
 import { PrizmThGroupService } from './th-group.service';
 
@@ -49,14 +49,11 @@ export class PrizmThGroupComponent<T extends Partial<Record<keyof T, any>>>
  );
  }
 
- // @ContentChild(forwardRef(() => PrizmThComponent))
- // readonly th!: PrizmThComponent<T>;
-
  @ContentChildren(forwardRef(() => PrizmThComponent), { descendants: true })
- readonly th!: QueryList<PrizmThComponent<T>>;
+ readonly th: QueryList<PrizmThComponent<T>> = prizmEmptyQueryList();
 
  @ContentChildren(forwardRef(() => PrizmHeadDirective))
- readonly heads: QueryList<PrizmHeadDirective<T>> = new QueryList<PrizmHeadDirective<T>>();
+ readonly heads: QueryList<PrizmHeadDirective<T>> = prizmEmptyQueryList();
 
  heads$: Observable<PrizmHeadDirective<T>[]> | null = null;
 

libs/components/src/lib/components/table/tr/tr.component.ts

@@ -18,7 +18,7 @@ import { PrizmTableDirective } from '../directives/table.directive';
 import { PRIZM_TABLE_PROVIDER } from '../providers/table.provider';
 import { PrizmTbodyComponent } from '../tbody/tbody.component';
 import { PrizmTableCellStatus } from '../table.types';
-import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { PrizmDestroyService, prizmEmptyQueryList } from '@prizm-ui/helpers';
 import { PrizmTableTreeService } from '../service/tree.service';
 import { PrizmCellService } from '../directives/cell.service';
 import { PrizmTdService } from '../td/td.service';
@@ -52,7 +52,7 @@ export class PrizmTrComponent<T extends Partial<Record<keyof T, unknown>>> {
  }
 
  @ContentChildren(forwardRef(() => PrizmCellDirective))
- readonly cells: QueryList<PrizmCellDirective> = new QueryList<PrizmCellDirective>();
+ readonly cells: QueryList<PrizmCellDirective> = prizmEmptyQueryList();
 
  readonly cells$ = merge(
  this.cells.changes,

libs/components/src/lib/components/tabs/tabs.component.ts

@@ -21,7 +21,12 @@ import { PrizmTabsService } from './tabs.service';
 import { PrizmTabComponent } from './components/tab.component';
 import { PrizmTabMenuItemDirective } from './tab-menu-item.directive';
 import { PrizmDropdownHostComponent } from '../dropdowns/dropdown-host';
-import { PrizmCallFuncPipe, PrizmDestroyService, PrizmLetDirective } from '@prizm-ui/helpers';
+import {
+ PrizmCallFuncPipe,
+ PrizmDestroyService,
+ prizmEmptyQueryList,
+ PrizmLetDirective,
+} from '@prizm-ui/helpers';
 import { PrizmTabCanOpen } from './tabs.model';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { CommonModule } from '@angular/common';
@@ -84,10 +89,12 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
  @ViewChild('tabsContainer', { static: true }) public tabsContainer!: ElementRef;
  @ViewChild('tabsDropdown', { static: true }) public tabsDropdown!: PrizmDropdownHostComponent;
  public tabsMoreDropdown!: PrizmDropdownHostComponent;
+
  @ContentChildren(PrizmTabComponent, { descendants: true })
- public tabElements!: QueryList<PrizmTabComponent>;
+ public tabElements: QueryList<PrizmTabComponent> = prizmEmptyQueryList();
+
  @ContentChildren(PrizmTabMenuItemDirective, { read: TemplateRef, descendants: true })
- public menuElements!: QueryList<TemplateRef<PrizmTabComponent>>;
+ public menuElements: QueryList<TemplateRef<PrizmTabComponent>> = prizmEmptyQueryList();
 
  override readonly testId_ = 'ui_tabs';
 

libs/doc/base/src/lib/components/documentation/documentation.component.ts

@@ -12,7 +12,6 @@
  ViewChildren,
 } from '@angular/core';
 import {
- EMPTY_QUERY,
  tuiHexToRgb,
  tuiIsNumber,
  tuiIsString,
@@ -31,7 +30,7 @@
 import orderBy from 'lodash-es/orderBy';
 import { PrizmDocumentationPropertyType } from '../../types/pages';
 import { UntypedFormControl, Validators } from '@angular/forms';
-import { PrizmFormControlHelpers } from '@prizm-ui/helpers';
+import { prizmEmptyQueryList, PrizmFormControlHelpers } from '@prizm-ui/helpers';
 // @bad TODO subscribe propertiesConnectors changes
 // @bad TODO refactor to make more flexible
 @Component({
@@ -89,14 +88,16 @@
  isAPI = false;
 
  @ContentChildren(PrizmDocDocumentationPropertyConnectorDirective)
- propertiesConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>> = EMPTY_QUERY;
+ propertiesConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>> =
+ prizmEmptyQueryList();
 
  @ViewChildren(PrizmDocDocumentationPropertyConnectorDirective)
- propertiesInnerConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>> = EMPTY_QUERY;
+ propertiesInnerConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>> =
+ prizmEmptyQueryList();
 
  activeItemIndex = 0;
  testIdPostfix = '';
  public getType(connector: PrizmDocDocumentationPropertyConnectorDirective<any>): string {
  if (connector.documentationPropertyMode === 'ng-content') return 'HtmlNode';
  return connector.documentationPropertyType;
  }
@@ -227,10 +228,10 @@
  }
 
  public updateOnChanges(
  connectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>>,
  propertiesInnerConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>>
  ): Observable<PrizmDocDocumentationPropertyConnectorDirective<any>[]> {
  const flows$: Observable<any>[] = [];
  if (connectors) flows$.push(connectors.changes);
  if (propertiesInnerConnectors) flows$.push(propertiesInnerConnectors.changes);
  return merge(...flows$).pipe(
@@ -243,7 +244,7 @@
  }
 
  private sortConnectors = (
  connectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>>,
  propertiesInnerConnectors: QueryList<PrizmDocDocumentationPropertyConnectorDirective<any>>
  ): PrizmDocDocumentationPropertyConnectorDirective<any>[] => {
  const sortOrder: PrizmDocumentationPropertyType[] = [

libs/doc/base/src/lib/components/page/page.component.ts

@@ -9,12 +9,12 @@ import {
  QueryList,
  SimpleChanges,
 } from '@angular/core';
-import { EMPTY_QUERY } from '@taiga-ui/cdk';
 
 import { PRIZM_DOC_DEFAULT_TABS } from '../../tokens/default-tabs';
 import { PAGE_PROVIDERS, PAGE_SEE_ALSO } from './page.providers';
 import { PrizmDocPageTabConnectorDirective } from './page-tab.directive';
 import { PrizmPageService } from './page.service';
+import { prizmEmptyQueryList } from '@prizm-ui/helpers';
 
 @Component({
  selector: `prizm-doc-page`,
@@ -37,7 +37,7 @@ export class PrizmDocPageComponent implements OnChanges {
  path = ``;
 
  @ContentChildren(PrizmDocPageTabConnectorDirective)
- readonly tabConnectors: QueryList<PrizmDocPageTabConnectorDirective> = EMPTY_QUERY;
+ readonly tabConnectors: QueryList<PrizmDocPageTabConnectorDirective> = prizmEmptyQueryList();
 
  activeItemIndex = NaN;
 

libs/helpers/src/lib/util/common.ts

@@ -1,3 +1,5 @@
+import { QueryList } from '@angular/core';
+
 /**
  * sort number, string, date by asc or desc
  * */
@@ -23,3 +25,7 @@ export function prizmSort<T>(x: T, y: T, asc = true): number {
 
  return result;
 }
+
+export function prizmEmptyQueryList<T = any>() {
+ return new QueryList<T>();
+}