Standalone migration -convert all components, directives and pipes to…

… standalone

src/app/core/directives/autofocus.directive.ts

@@ -3,7 +3,8 @@ import { AfterContentInit, Directive, ElementRef, Input, OnDestroy } from '@angu
 const BASE_TIMER_DELAY = 10;
 
 @Directive({
-  selector: '[jAutofocus]'
+    selector: '[jAutofocus]',
+    standalone: true
 })
 export class AutofocusDirective implements AfterContentInit, OnDestroy {
   @Input('jAutofocus') enable: boolean | string;

src/app/jira-control/avatar/avatar.component.ts

@@ -1,9 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { NgIf, NgClass, NgStyle } from '@angular/common';
 
 @Component({
-  selector: 'j-avatar',
-  templateUrl: './avatar.component.html',
-  styleUrls: ['./avatar.component.scss']
+    selector: 'j-avatar',
+    templateUrl: './avatar.component.html',
+    styleUrls: ['./avatar.component.scss'],
+    standalone: true,
+    imports: [NgIf, NgClass, NgStyle]
 })
 export class AvatarComponent {
   @Input() avatarUrl: string;

src/app/jira-control/breadcrumbs/breadcrumbs.component.ts

@@ -1,9 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'breadcrumbs',
-  templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
+    selector: 'breadcrumbs',
+    templateUrl: './breadcrumbs.component.html',
+    styleUrls: ['./breadcrumbs.component.scss'],
+    standalone: true,
+    imports: [NgFor, NgIf]
 })
 export class BreadcrumbsComponent {
   @Input() items: string[] = [];

src/app/jira-control/button/button.component.ts

@@ -1,9 +1,13 @@
 import { Component, Input } from '@angular/core';
+import { SvgIconComponent } from '../svg-icon/svg-icon.component';
+import { NgClass, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'j-button',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss']
+    selector: 'j-button',
+    templateUrl: './button.component.html',
+    styleUrls: ['./button.component.scss'],
+    standalone: true,
+    imports: [NgClass, NgIf, SvgIconComponent]
 })
 export class ButtonComponent {
   @Input() type = 'button';

src/app/jira-control/input/input.component.ts

@@ -1,10 +1,14 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { SvgIconComponent } from '../svg-icon/svg-icon.component';
+import { NgClass, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'j-input',
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss']
+    selector: 'j-input',
+    templateUrl: './input.component.html',
+    styleUrls: ['./input.component.scss'],
+    standalone: true,
+    imports: [NgClass, NgIf, SvgIconComponent, ReactiveFormsModule]
 })
 export class InputComponent implements OnInit {
   @Input() control: UntypedFormControl;

src/app/jira-control/jira-control.module.ts

@@ -17,8 +17,7 @@ const JiraControlComponents = [
   AvatarComponent
 ];
 @NgModule({
-  declarations: JiraControlComponents,
-  exports: JiraControlComponents,
-  imports: [CommonModule, ReactiveFormsModule]
+    exports: JiraControlComponents,
+    imports: [CommonModule, ReactiveFormsModule, ...JiraControlComponents]
 })
 export class JiraControlModule {}

src/app/jira-control/svg-definitions/svg-definitions.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'svg-definitions',
-  templateUrl: './svg-definitions.component.html'
+    selector: 'svg-definitions',
+    templateUrl: './svg-definitions.component.html',
+    standalone: true
 })
 export class SvgDefinitionsComponent {
   constructor() {}

src/app/jira-control/svg-icon/svg-icon.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'svg-icon',
-  templateUrl: './svg-icon.component.html'
+    selector: 'svg-icon',
+    templateUrl: './svg-icon.component.html',
+    standalone: true
 })
 export class SvgIconComponent {
   @Input() name: string;

src/app/project/components/add-issue-modal/add-issue-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import { IssueType, JIssue, IssueStatus, IssuePriority } from '@trungk18/interface/issue';
 import { quillConfiguration } from '@trungk18/project/config/editor';
 import { NzModalRef } from 'ng-zorro-antd/modal';
@@ -12,11 +12,21 @@ import { JUser } from '@trungk18/interface/user';
 import { tap } from 'rxjs/operators';
 import { NoWhitespaceValidator } from '@trungk18/core/validators/no-whitespace.validator';
 import { DateUtil } from '@trungk18/project/utils/date';
+import { AsyncPipe } from '@angular/common';
+import { IssueAssigneesSelectComponent } from './issue-assignees-select/issue-assignees-select.component';
+import { IssueReporterSelectComponent } from './issue-reporter-select/issue-reporter-select.component';
+import { QuillModule } from 'ngx-quill';
+import { AutofocusDirective } from '../../../core/directives/autofocus.directive';
+import { IssuePrioritySelectComponent } from './issue-priority-select/issue-priority-select.component';
+import { IssueTypeSelectComponent } from './issue-type-select/issue-type-select.component';
+import { ButtonComponent } from '../../../jira-control/button/button.component';
 
 @Component({
-  selector: 'add-issue-modal',
-  templateUrl: './add-issue-modal.component.html',
-  styleUrls: ['./add-issue-modal.component.scss']
+    selector: 'add-issue-modal',
+    templateUrl: './add-issue-modal.component.html',
+    styleUrls: ['./add-issue-modal.component.scss'],
+    standalone: true,
+    imports: [ButtonComponent, ReactiveFormsModule, IssueTypeSelectComponent, IssuePrioritySelectComponent, AutofocusDirective, QuillModule, IssueReporterSelectComponent, IssueAssigneesSelectComponent, AsyncPipe]
 })
 @UntilDestroy()
 export class AddIssueModalComponent implements OnInit {

src/app/project/components/add-issue-modal/issue-assignees-select/issue-assignees-select.component.ts

@@ -1,12 +1,17 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { JUser } from '@trungk18/interface/user';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { UserComponent } from '../../user/user.component';
+import { NgFor } from '@angular/common';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 @Component({
-  selector: 'issue-assignees-select',
-  templateUrl: './issue-assignees-select.component.html',
-  styleUrls: ['./issue-assignees-select.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'issue-assignees-select',
+    templateUrl: './issue-assignees-select.component.html',
+    styleUrls: ['./issue-assignees-select.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [NzSelectModule, ReactiveFormsModule, NgFor, UserComponent]
 })
 export class IssueAssigneesSelectComponent {
   @Input() control: UntypedFormControl;

src/app/project/components/add-issue-modal/issue-priority-select/issue-priority-select.component.ts

@@ -1,14 +1,19 @@
 import { Component, Input } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { IssuePriorityIcon } from '@trungk18/interface/issue-priority-icon';
 import { IssueUtil } from '@trungk18/project/utils/issue';
 import { IssuePriority } from '@trungk18/interface/issue';
 import { ProjectConst } from '@trungk18/project/config/const';
+import { SvgIconComponent } from '../../../../jira-control/svg-icon/svg-icon.component';
+import { NgFor } from '@angular/common';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 @Component({
-  selector: 'issue-priority-select',
-  templateUrl: './issue-priority-select.component.html',
-  styleUrls: ['./issue-priority-select.component.scss']
+    selector: 'issue-priority-select',
+    templateUrl: './issue-priority-select.component.html',
+    styleUrls: ['./issue-priority-select.component.scss'],
+    standalone: true,
+    imports: [NzSelectModule, ReactiveFormsModule, NgFor, SvgIconComponent]
 })
 export class IssuePrioritySelectComponent {
   @Input() control: UntypedFormControl;

src/app/project/components/add-issue-modal/issue-reporter-select/issue-reporter-select.component.ts

@@ -1,11 +1,16 @@
 import { Component, Input } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { JUser } from '@trungk18/interface/user';
+import { UserComponent } from '../../user/user.component';
+import { NgFor } from '@angular/common';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 @Component({
-  selector: 'issue-reporter-select',
-  templateUrl: './issue-reporter-select.component.html',
-  styleUrls: ['./issue-reporter-select.component.scss']
+    selector: 'issue-reporter-select',
+    templateUrl: './issue-reporter-select.component.html',
+    styleUrls: ['./issue-reporter-select.component.scss'],
+    standalone: true,
+    imports: [NzSelectModule, ReactiveFormsModule, NgFor, UserComponent]
 })
 export class IssueReporterSelectComponent {
   @Input() control: UntypedFormControl;

src/app/project/components/add-issue-modal/issue-type-select/issue-type-select.component.ts

@@ -2,13 +2,18 @@ import { Component, Input } from '@angular/core';
 import { IssueType } from '@trungk18/interface/issue';
 import { IssueUtil } from '@trungk18/project/utils/issue';
 import { IssueTypeWithIcon } from '@trungk18/interface/issue-type-icon';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { ProjectConst } from '@trungk18/project/config/const';
+import { SvgIconComponent } from '../../../../jira-control/svg-icon/svg-icon.component';
+import { NgFor } from '@angular/common';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 @Component({
-  selector: 'issue-type-select',
-  templateUrl: './issue-type-select.component.html',
-  styleUrls: ['./issue-type-select.component.scss']
+    selector: 'issue-type-select',
+    templateUrl: './issue-type-select.component.html',
+    styleUrls: ['./issue-type-select.component.scss'],
+    standalone: true,
+    imports: [NzSelectModule, ReactiveFormsModule, NgFor, SvgIconComponent]
 })
 export class IssueTypeSelectComponent {
   @Input() control: UntypedFormControl;

src/app/project/components/board/board-dnd-list/board-dnd-list.component.ts

@@ -1,4 +1,4 @@
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { IssueStatus, IssueStatusDisplay, JIssue } from '@trungk18/interface/issue';
 import { FilterState } from '@trungk18/project/state/filter/filter.store';
@@ -8,12 +8,16 @@ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { FilterQuery } from '@trungk18/project/state/filter/filter.query';
 import * as dateFns from 'date-fns';
 import { IssueUtil } from '@trungk18/project/utils/issue';
+import { IssueCardComponent } from '../../issues/issue-card/issue-card.component';
+import { NgFor } from '@angular/common';
 
 @Component({
-  selector: '[board-dnd-list]',
-  templateUrl: './board-dnd-list.component.html',
-  styleUrls: ['./board-dnd-list.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: '[board-dnd-list]',
+    templateUrl: './board-dnd-list.component.html',
+    styleUrls: ['./board-dnd-list.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CdkDropList, NgFor, IssueCardComponent, CdkDrag]
 })
 @UntilDestroy()
 export class BoardDndListComponent implements OnInit {

src/app/project/components/board/board-dnd/board-dnd.component.ts

@@ -3,11 +3,16 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { IssueStatus } from '@trungk18/interface/issue';
 import { ProjectQuery } from '@trungk18/project/state/project/project.query';
 import { AuthQuery } from '@trungk18/project/auth/auth.query';
+import { BoardDndListComponent } from '../board-dnd-list/board-dnd-list.component';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { CdkDropListGroup } from '@angular/cdk/drag-drop';
 @UntilDestroy()
 @Component({
-  selector: 'board-dnd',
-  templateUrl: './board-dnd.component.html',
-  styleUrls: ['./board-dnd.component.scss']
+    selector: 'board-dnd',
+    templateUrl: './board-dnd.component.html',
+    styleUrls: ['./board-dnd.component.scss'],
+    standalone: true,
+    imports: [CdkDropListGroup, NgFor, BoardDndListComponent, AsyncPipe]
 })
 export class BoardDndComponent {
   issueStatuses: IssueStatus[] = [

src/app/project/components/board/board-filter/board-filter.component.ts

@@ -1,16 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FilterQuery } from '@trungk18/project/state/filter/filter.query';
 import { FilterService } from '@trungk18/project/state/filter/filter.service';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { ProjectQuery } from '@trungk18/project/state/project/project.query';
 import { JUser } from '@trungk18/interface/user';
+import { ButtonComponent } from '../../../../jira-control/button/button.component';
+import { AvatarComponent } from '../../../../jira-control/avatar/avatar.component';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NgFor, NgIf, AsyncPipe } from '@angular/common';
+import { InputComponent } from '../../../../jira-control/input/input.component';
 
 @Component({
-  selector: 'board-filter',
-  templateUrl: './board-filter.component.html',
-  styleUrls: ['./board-filter.component.scss']
+    selector: 'board-filter',
+    templateUrl: './board-filter.component.html',
+    styleUrls: ['./board-filter.component.scss'],
+    standalone: true,
+    imports: [ReactiveFormsModule, FormsModule, InputComponent, NgFor, NzToolTipModule, AvatarComponent, ButtonComponent, NgIf, AsyncPipe]
 })
 @UntilDestroy()
 export class BoardFilterComponent implements OnInit {

src/app/project/components/issues/issue-assignees/issue-assignees.component.ts

@@ -3,11 +3,20 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { JIssue } from '@trungk18/interface/issue';
 import { JUser } from '@trungk18/interface/user';
 import { ProjectService } from '@trungk18/project/state/project/project.service';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { SvgIconComponent } from '../../../../jira-control/svg-icon/svg-icon.component';
+import { UserComponent } from '../../user/user.component';
+import { ButtonComponent } from '../../../../jira-control/button/button.component';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'issue-assignees',
-  templateUrl: './issue-assignees.component.html',
-  styleUrls: ['./issue-assignees.component.scss']
+    selector: 'issue-assignees',
+    templateUrl: './issue-assignees.component.html',
+    styleUrls: ['./issue-assignees.component.scss'],
+    standalone: true,
+    imports: [NgFor, ButtonComponent, UserComponent, SvgIconComponent, NzDropDownModule, NzIconModule, NzMenuModule, NgIf]
 })
 @UntilDestroy()
 export class IssueAssigneesComponent implements OnInit, OnChanges {

src/app/project/components/issues/issue-card/issue-card.component.ts

@@ -7,11 +7,17 @@ import { ProjectQuery } from '@trungk18/project/state/project/project.query';
 import { IssueUtil } from '@trungk18/project/utils/issue';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { IssueModalComponent } from '../issue-modal/issue-modal.component';
+import { SvgIconComponent } from '../../../../jira-control/svg-icon/svg-icon.component';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { AvatarComponent } from '../../../../jira-control/avatar/avatar.component';
+import { NgFor } from '@angular/common';
 
 @Component({
-  selector: 'issue-card',
-  templateUrl: './issue-card.component.html',
-  styleUrls: ['./issue-card.component.scss']
+    selector: 'issue-card',
+    templateUrl: './issue-card.component.html',
+    styleUrls: ['./issue-card.component.scss'],
+    standalone: true,
+    imports: [NgFor, AvatarComponent, NzToolTipModule, SvgIconComponent]
 })
 @UntilDestroy()
 export class IssueCardComponent implements OnChanges, OnInit {

src/app/project/components/issues/issue-comment/issue-comment.component.ts

@@ -1,15 +1,21 @@
 import { Component, Input, OnInit, HostListener, ElementRef, ViewChild } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { JComment } from '@trungk18/interface/comment';
 import { JUser } from '@trungk18/interface/user';
 import { AuthQuery } from '@trungk18/project/auth/auth.query';
 import { ProjectService } from '@trungk18/project/state/project/project.service';
+import { ButtonComponent } from '../../../../jira-control/button/button.component';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { NgIf, DatePipe } from '@angular/common';
+import { AvatarComponent } from '../../../../jira-control/avatar/avatar.component';
 
 @Component({
-  selector: 'issue-comment',
-  templateUrl: './issue-comment.component.html',
-  styleUrls: ['./issue-comment.component.scss']
+    selector: 'issue-comment',
+    templateUrl: './issue-comment.component.html',
+    styleUrls: ['./issue-comment.component.scss'],
+    standalone: true,
+    imports: [AvatarComponent, NgIf, TextFieldModule, ReactiveFormsModule, ButtonComponent, DatePipe]
 })
 @UntilDestroy()
 export class IssueCommentComponent implements OnInit {

src/app/project/components/issues/issue-comments/issue-comments.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input  } from '@angular/core';
 import { JIssue } from '@trungk18/interface/issue';
+import { NgFor } from '@angular/common';
+import { IssueCommentComponent } from '../issue-comment/issue-comment.component';
 
 @Component({
-  selector: 'issue-comments',
-  templateUrl: './issue-comments.component.html',
-  styleUrls: ['./issue-comments.component.scss']
+    selector: 'issue-comments',
+    templateUrl: './issue-comments.component.html',
+    styleUrls: ['./issue-comments.component.scss'],
+    standalone: true,
+    imports: [IssueCommentComponent, NgFor]
 })
 export class IssueCommentsComponent {
   @Input() issue: JIssue;