@cccteam/ccc-lib 0.0.13 → 0.0.15

package/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "ccc",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "ccc",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  }
+);

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ccc-lib",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "date-fns",
+    "date-fns-tz"
+  ]
+}

package/package.json

@@ -1,79 +1,18 @@
 {
   "name": "@cccteam/ccc-lib",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "repository": {
     "type": "git",
     "url": "git://github.com/cccteam/ccc-lib.git"
   },
   "peerDependencies": {
-    "@angular/common": "^19.0.2",
-    "@angular/core": "^19.0.2"
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/cccteam-ccc-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib.mjs"
-    },
-    "./src/auth-authentication-guard": {
-      "types": "./src/auth-authentication-guard/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-authentication-guard.mjs"
-    },
-    "./src/auth-forms": {
-      "types": "./src/auth-forms/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-forms.mjs"
-    },
-    "./src/auth-has-permission": {
-      "types": "./src/auth-has-permission/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-has-permission.mjs"
-    },
-    "./src/auth-authorization-guard": {
-      "types": "./src/auth-authorization-guard/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-authorization-guard.mjs"
-    },
-    "./src/auth-service": {
-      "types": "./src/auth-service/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-service.mjs"
-    },
-    "./src/auth-state": {
-      "types": "./src/auth-state/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-auth-state.mjs"
-    },
-    "./src/types": {
-      "types": "./src/types/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-types.mjs"
-    },
-    "./src/ui-alert": {
-      "types": "./src/ui-alert/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-ui-alert.mjs"
-    },
-    "./src/ui-core-state": {
-      "types": "./src/ui-core-state/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-ui-core-state.mjs"
-    },
-    "./src/ui-interceptor": {
-      "types": "./src/ui-interceptor/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-ui-interceptor.mjs"
-    },
-    "./src/ui-notification-service": {
-      "types": "./src/ui-notification-service/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-ui-notification-service.mjs"
-    },
-    "./src/ui-sidenav": {
-      "types": "./src/ui-sidenav/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-ui-sidenav.mjs"
-    },
-    "./src/util-request-options": {
-      "types": "./src/util-request-options/index.d.ts",
-      "default": "./fesm2022/cccteam-ccc-lib-src-util-request-options.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/auth-authentication-guard/authentication.guard.ts

@@ -0,0 +1,40 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+import { BASE_URL } from '@cccteam/ccc-lib/src/types';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+
+export const AuthenticationGuard = (
+  route: ActivatedRouteSnapshot,
+  routerState: RouterStateSnapshot,
+): Observable<boolean> => {
+  const authService = inject(AuthService);
+  const baseUrl = inject(BASE_URL);
+
+  const authenticate = (): void => {
+    const url = routerState.url;
+    const absoluteUrl = baseUrl + (!url.toString().startsWith('/') ? '/' + url : url);
+    const encodedUrl = encodeURIComponent(absoluteUrl);
+    window.location.href = `${authService.loginRoute()}?returnUrl=${encodedUrl}`;
+  };
+
+  if (authService.authenticated()) {
+    return of(true);
+  }
+
+  return authService.checkUserSession().pipe(
+    map((sessionInfo) => {
+      if (sessionInfo?.authenticated) {
+        return true;
+      }
+
+      authenticate();
+      return false;
+    }),
+    catchError(() => {
+      authenticate();
+      return of(false);
+    }),
+  );
+};

package/src/auth-authentication-guard/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/auth-authorization-guard/authorization.guard.ts

@@ -0,0 +1,17 @@
+import { computed, inject, Signal } from '@angular/core';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+
+export const AuthorizationGuard = (route: ActivatedRouteSnapshot): Signal<boolean> => {
+  const router = inject(Router);
+  const auth = inject(AuthService);
+  return computed(() => {
+    const hasPermission = auth.hasPermission(route.data['scope']);
+    if (hasPermission) {
+      return true;
+    } else {
+      router.navigate(['/']);
+      return false;
+    }
+  });
+};

package/src/auth-authorization-guard/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/auth-forms/ccc-field/ccc-field.component.html

@@ -0,0 +1 @@
+<p>ccc-field works!</p>

package/src/auth-forms/ccc-field/ccc-field.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CccInputFieldComponent } from './ccc-field.component';
+
+describe('CccFieldComponent', () => {
+  let component: CccInputFieldComponent;
+  let fixture: ComponentFixture<CccInputFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CccInputFieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CccInputFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/auth-forms/ccc-field/ccc-field.component.ts

@@ -0,0 +1,74 @@
+import { Component, computed, inject, input, OnInit, signal, Signal } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+import { Domain, ReadPermission, Resource, UpdatePermission } from '@cccteam/ccc-lib/src/types';
+
+export enum InputMode {
+  Read = 'read',
+  Edit = 'edit',
+}
+
+@Component({
+  selector: 'ccc-input-field',
+  imports: [MatFormFieldModule, MatInputModule],
+  template: `
+    <mat-form-field [class]="className()">
+      <mat-label>{{ name() }}</mat-label>
+      <input matInput [disabled]="mode() === inputMode.Edit && canEdit()" [value]="value()" />
+    </mat-form-field>
+  `,
+  styleUrl: './ccc-field.component.scss',
+})
+export class CccInputFieldComponent implements OnInit {
+  auth = inject(AuthService);
+  className = input();
+  mode = input.required<InputMode>();
+  resource = input.required<Resource>();
+  domain = input.required<Domain>();
+  value = input.required();
+  name = input.required<string>();
+
+  inputMode = InputMode;
+
+  canEdit: Signal<boolean> = signal(false);
+  canEditSelector = false;
+
+  canRead: Signal<boolean> = signal(false);
+  canReadSelector = false;
+
+  ngOnInit(): void {
+    this.canEditSelector = this.auth.hasPermission({
+      resource: this.resource(),
+      permission: ReadPermission,
+      domain: this.domain(),
+    });
+    this.canReadSelector = this.auth.hasPermission({
+      resource: this.resource(),
+      permission: UpdatePermission,
+      domain: this.domain(),
+    });
+
+    this.canRead = computed(() => {
+      const res = this.resource();
+      if (!res) {
+        return false;
+      }
+      if (AuthService.requiresPermission(this.resource(), ReadPermission)) {
+        return this.canReadSelector;
+      }
+      return false;
+    });
+
+    this.canEdit = computed(() => {
+      const res = this.resource();
+      if (!res) {
+        return false;
+      }
+      if (AuthService.requiresPermission(this.resource(), UpdatePermission)) {
+        return this.canEditSelector;
+      }
+      return false;
+    });
+  }
+}

package/src/auth-forms/form-helpers.ts

@@ -0,0 +1,39 @@
+import { FormArray, FormGroup } from '@angular/forms';
+import { isEqual } from 'lodash-es';
+
+/**
+ * Accepts a FormGroup and compares it to an object to return the dirty form values
+ * as a sparse object
+ * @param form - FormGroup
+ * @param compareData - object to compare form values against
+ * @returns Partial<T>
+ * @example sparseFormData<UserCreate>(this.userForm, initUser)
+ */
+export function sparseFormData<T>(form: FormGroup, compareData: T): T {
+  const sparseFormData: T = {} as T;
+
+  for (const [key, control] of Object.entries(form.controls)) {
+    const controlValue = control.value;
+    const compareValue = compareData[key as keyof T];
+
+    if (!isEqual(controlValue, compareValue)) {
+      sparseFormData[key as keyof T] = controlValue as T[keyof T];
+    }
+  }
+
+  return sparseFormData;
+}
+
+/**
+ * Accepts a FormArray and removes empty strings
+ * @param formArray - FormArray
+ * @returns FormArray
+ */
+export function cleanStringFormArray(formArray: FormArray): FormArray {
+  for (let i = formArray.controls.length - 1; i >= 0; i--) {
+    if (formArray.at(i).value === '') {
+      formArray.removeAt(i);
+    }
+  }
+  return formArray;
+}

package/src/auth-forms/{public-api.d.ts → index.ts}

@@ -1,2 +1,3 @@
 export * from './ccc-field/ccc-field.component';
 export * from './form-helpers';
+

package/src/auth-forms/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/auth-has-permission/has-permission.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, Input, TemplateRef, ViewContainerRef, effect, inject, signal } from '@angular/core';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+import { PermissionScope } from '@cccteam/ccc-lib/src/types';
+
+@Directive({
+  selector: '[cccHasPermission]',
+  standalone: true,
+})
+export class HasPermissionDirective {
+  private auth = inject(AuthService);
+  private templateRef = inject(TemplateRef<unknown>);
+  private viewContainer = inject(ViewContainerRef);
+
+  private scope = signal<PermissionScope | undefined>(undefined);
+
+  @Input()
+  set cccHasPermission(scope: PermissionScope) {
+    this.scope.set(scope);
+  }
+
+  constructor() {
+    effect(() => {
+      const scope = this.scope();
+
+      if (this.auth.hasPermission(scope) && this.auth.authenticated()) {
+        if (!this.viewContainer.get(0)) {
+          this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+      } else {
+        this.viewContainer.clear();
+      }
+    });
+  }
+}

package/src/auth-has-permission/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/auth-service/auth.service.ts

@@ -0,0 +1,92 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Inject, Injectable, signal } from '@angular/core';
+import {
+  API_URL,
+  Permission,
+  PERMISSION_REQUIRED,
+  PermissionScope,
+  Resource,
+  SessionInfo,
+} from '@cccteam/ccc-lib/src/types';
+import { errorOptions } from '@cccteam/ccc-lib/src/util-request-options';
+import { map, Observable, tap } from 'rxjs';
+
+const routes = {
+  login: (rootUrl: string): string => `${rootUrl}/user/login`,
+  session: (rootUrl: string): string => `${rootUrl}/user/session`,
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  http = inject(HttpClient);
+  private authenticatedSignal = signal(false);
+  private sessionInfoSignal = signal({} as SessionInfo);
+
+  redirectUrl = signal('');
+  authenticated = this.authenticatedSignal.asReadonly();
+  sessionInfo = this.sessionInfoSignal.asReadonly();
+
+  constructor(@Inject(API_URL) private apiUrl: string) {
+    this.initializePermissionFn();
+  }
+
+  private static permissionFn: (resource: Resource, permission: Permission) => boolean;
+
+  hasPermission(scope?: PermissionScope): boolean {
+    if (!scope) return true;
+    const resourcePermissions = this.sessionInfo().permissions?.[scope.domain]?.[scope.resource];
+    return Array.isArray(resourcePermissions) && resourcePermissions.includes(scope.permission);
+  }
+
+  static requiresPermission(resource: Resource, permission: Permission): boolean {
+    if (!AuthService.permissionFn) {
+      throw new Error(
+        `AuthState has not been initialized. Ensure AuthState is provided in your module or instantiated at least once.`,
+      );
+    }
+    return AuthService.permissionFn(resource, permission);
+  }
+
+  private initializePermissionFn(): void {
+    if (!AuthService.permissionFn) {
+      AuthService.permissionFn = inject(PERMISSION_REQUIRED);
+    }
+  }
+
+  /**
+   * Logs a user out.
+   *
+   * @returns Observable with a boolean indicating whether they were logged out.
+   */
+  logout(): Observable<boolean> {
+    return this.http
+      .delete(routes.session(this.apiUrl), errorOptions(false))
+      .pipe(map(() => true))
+      .pipe(
+        tap(() => {
+          this.authenticatedSignal.set(false);
+          this.sessionInfoSignal.set({} as SessionInfo);
+        }),
+      );
+  }
+
+  /**
+   * Checks a user's session with the server.
+   *
+   * @returns Observable with the user session info
+   */
+  checkUserSession(): Observable<SessionInfo> {
+    return this.http.get<SessionInfo>(routes.session(this.apiUrl), errorOptions(false)).pipe(
+      tap((sessionInfo) => {
+        this.authenticatedSignal.set(!!sessionInfo?.authenticated);
+        this.sessionInfoSignal.set(sessionInfo);
+      }),
+    );
+  }
+
+  loginRoute(): string {
+    return routes.login(this.apiUrl);
+  }
+}

package/src/auth-service/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ccc-camel-case-to-title/camel-case-to-title.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'camelCaseToTitle',
+})
+export class CamelCaseToTitlePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) {
+      return value;
+    }
+
+    if (value === value.toUpperCase() && !/[0-9]/.test(value)) {
+      return value;
+    }
+
+    let transformed = value.replace(/([A-Z])/g, ' $1');
+    transformed = transformed.replace(/([a-zA-Z])([0-9])/g, '$1 $2');
+    transformed = transformed.trim();
+    transformed = transformed.charAt(0).toUpperCase() + transformed.slice(1);
+
+    return transformed;
+  }
+}

package/src/ccc-camel-case-to-title/index.ts

@@ -0,0 +1 @@
+export * from './camel-case-to-title.pipe';

package/src/ccc-camel-case-to-title/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}