feat(cdk): add loading directives

libs/cdk/loading/abstract-load.directive.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectorRef, Directive, inject, OnChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { LoadingService, OnDestroy$ } from '@cognizone/ng-core';
+import { distinctUntilChanged, map } from 'rxjs';
+
+@Directive({
+  standalone: true,
+})
+export abstract class AbstractLoadDirective extends OnDestroy$ implements OnChanges {
+  abstract loadingKey?: string;
+  abstract else?: TemplateRef<unknown>;
+  protected abstract type: 'loaded' | 'loading';
+
+  private templateRef: TemplateRef<unknown> = inject(TemplateRef);
+  private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
+  private loadingService: LoadingService = inject(LoadingService);
+  private vcr: ViewContainerRef = inject(ViewContainerRef);
+
+  ngOnChanges(): void {
+    this.emptySink();
+
+    this.subSink = this.loadingService
+      .getLoading(this.loadingKey)
+      .pipe(
+        distinctUntilChanged(),
+        map(loading => (this.type === 'loading' ? loading : !loading))
+      )
+      .subscribe(loadFlag => {
+        this.vcr.clear();
+        if (!loadFlag && this.else) this.vcr.createEmbeddedView(this.else);
+        else if (loadFlag) this.vcr.createEmbeddedView(this.templateRef);
+        this.cdr.markForCheck();
+      });
+  }
+}

libs/cdk/loading/if-loaded.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+import { AbstractLoadDirective } from './abstract-load.directive';
+
+/**
+ * @example ```html
+ * <div *czIfLoaded="'my-key'">I'm visible if my-key is not loading in LoadingService</div>
+ * <div *czIfLoaded>I'm visible if the key used by the provided LoadingService is not loading</div>
+ * ```
+ */
+@Directive({
+  selector: '[czIfLoaded]',
+  standalone: true,
+})
+export class IfLoadedDirective extends AbstractLoadDirective {
+  @Input('czIfLoaded')
+  loadingKey?: string;
+  @Input('czIfLoadedElse')
+  else?: TemplateRef<unknown>;
+
+  protected type: 'loaded' | 'loading' = 'loaded';
+}

libs/cdk/loading/if-loading.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+import { AbstractLoadDirective } from './abstract-load.directive';
+
+/**
+ * @example ```html
+ * <div *czIfLoading="'my-key'">I'm visible if my-key is loading in LoadingService</div>
+ * <div *czIfLoading>I'm visible if the key used by the provided LoadingService is loading</div>
+ * ```
+ */
+@Directive({
+  selector: '[czIfLoading]',
+  standalone: true,
+})
+export class IfLoadingDirective extends AbstractLoadDirective {
+  @Input('czIfLoading')
+  loadingKey?: string;
+  @Input('czIfLoadingElse')
+  else?: TemplateRef<unknown>;
+
+  protected type: 'loaded' | 'loading' = 'loading';
+}

libs/cdk/loading/index.ts

@@ -0,0 +1,2 @@
+export * from './if-loaded.directive';
+export * from './if-loading.directive';

libs/cdk/loading/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}