@descope/angular-sdk 0.5.9 → 0.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/angular-sdk",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "peerDependencies": {
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0"
@@ -10,23 +10,6 @@
     "node": "^16.14.0 || >=18.10.0",
     "npm": ">= 8.1.0"
   },
-  "lint-staged": {
-    "+(src|test|examples)/**/*.{js,ts,html}": [
-      "npm run lint"
-    ]
-  },
-  "dependencies": {
-    "@descope/access-key-management-widget": "0.1.68",
-    "@descope/audit-management-widget": "0.1.31",
-    "@descope/role-management-widget": "0.1.66",
-    "@descope/user-management-widget": "0.4.68",
-    "@descope/user-profile-widget": "0.0.34",
-    "@descope/web-component": "3.12.0",
-    "tslib": "^2.3.0"
-  },
-  "optionalDependencies": {
-    "@descope/web-js-sdk": ">=1"
-  },
   "module": "fesm2022/descope-angular-sdk.mjs",
   "typings": "index.d.ts",
   "exports": {
@@ -40,5 +23,65 @@
       "default": "./fesm2022/descope-angular-sdk.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@descope/access-key-management-widget": "0.1.115",
+    "@descope/audit-management-widget": "0.1.78",
+    "@descope/user-management-widget": "0.4.116",
+    "@descope/user-profile-widget": "0.0.94",
+    "@descope/role-management-widget": "0.1.113",
+    "@descope/web-js-sdk": "1.16.0",
+    "@descope/web-component": "3.21.1",
+    "@descope/core-js-sdk": "2.24.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.6",
+    "@angular-eslint/builder": "16.3.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
+    "@angular-eslint/schematics": "16.3.1",
+    "@angular-eslint/template-parser": "16.3.1",
+    "@angular/animations": "^16.2.9",
+    "@angular/cli": "^16.2.6",
+    "@angular/common": "^16.2.9",
+    "@angular/compiler": "^16.2.9",
+    "@angular/compiler-cli": "^16.2.9",
+    "@angular/core": "^16.2.9",
+    "@angular/forms": "^16.2.9",
+    "@angular/platform-browser": "^16.2.9",
+    "@angular/platform-browser-dynamic": "^16.2.9",
+    "@angular/router": "^16.2.9",
+    "@types/jest": "^29.5.5",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^13.1.2",
+    "lint-staged": "^15.2.0",
+    "ng-mocks": "^14.11.0",
+    "ng-packagr": "^16.2.3",
+    "prettier": "2.8.8",
+    "pretty-quick": "^3.1.3",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "typescript": "4.9.3",
+    "zone.js": "~0.13.0"
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged",
+    "prebuild": "node scripts/setversion/setversion.js",
+    "build": "npm run build:lib && rm -rf ./dist/package.json",
+    "build:lib": "cp package.json ./projects/angular-sdk && ng build angular-sdk",
+    "build:app": "ng build demo-app",
+    "pretest": "cp package.json ./projects/angular-sdk",
+    "watch": "ng build --watch --configuration development",
+    "test": "jest --config jest.config.js",
+    "lint": "ng lint",
+    "format": "prettier . -w --ignore-path .gitignore",
+    "format-check": "prettier . --check --ignore-path .gitignore"
+  }
 }

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "angular-sdk",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/sdks/angular-sdk/projects",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/projects/angular-sdk/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["node_modules", "dist"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-output-native": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

package/projects/angular-sdk/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@descope/core-js-sdk",
+    "@descope/web-js-sdk",
+    "@descope/web-component",
+    "@descope/user-management-widget",
+    "@descope/role-management-widget",
+    "@descope/access-key-management-widget",
+    "@descope/audit-management-widget",
+    "@descope/user-profile-widget"
+  ]
+}

package/projects/angular-sdk/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@descope/angular-sdk",
+  "version": "0.5.11",
+  "peerDependencies": {
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": "^16.14.0 || >=18.10.0",
+    "npm": ">= 8.1.0"
+  },
+  "module": "fesm2022/descope-angular-sdk.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/descope-angular-sdk.mjs",
+      "esm": "./esm2022/descope-angular-sdk.mjs",
+      "default": "./fesm2022/descope-angular-sdk.mjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged",
+    "prebuild": "node scripts/setversion/setversion.js",
+    "build": "npm run build:lib && rm -rf ./dist/package.json",
+    "build:lib": "cp package.json ./projects/angular-sdk && ng build angular-sdk",
+    "build:app": "ng build demo-app",
+    "pretest": "cp package.json ./projects/angular-sdk",
+    "watch": "ng build --watch --configuration development",
+    "test": "jest --config jest.config.js",
+    "lint": "ng lint",
+    "format": "prettier . -w --ignore-path .gitignore",
+    "format-check": "prettier . --check --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@descope/access-key-management-widget": "workspace:*",
+    "@descope/audit-management-widget": "workspace:*",
+    "@descope/role-management-widget": "workspace:*",
+    "@descope/user-management-widget": "workspace:*",
+    "@descope/user-profile-widget": "workspace:*",
+    "@descope/web-component": "workspace:*",
+    "@descope/web-js-sdk": "workspace:*",
+    "@descope/core-js-sdk": "workspace:*",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.6",
+    "@angular-eslint/builder": "16.3.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
+    "@angular-eslint/schematics": "16.3.1",
+    "@angular-eslint/template-parser": "16.3.1",
+    "@angular/animations": "^16.2.9",
+    "@angular/cli": "^16.2.6",
+    "@angular/common": "^16.2.9",
+    "@angular/compiler": "^16.2.9",
+    "@angular/compiler-cli": "^16.2.9",
+    "@angular/core": "^16.2.9",
+    "@angular/forms": "^16.2.9",
+    "@angular/platform-browser": "^16.2.9",
+    "@angular/platform-browser-dynamic": "^16.2.9",
+    "@angular/router": "^16.2.9",
+    "@types/jest": "^29.5.5",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^13.1.2",
+    "lint-staged": "^15.2.0",
+    "ng-mocks": "^14.11.0",
+    "ng-packagr": "^16.2.3",
+    "prettier": "2.8.8",
+    "pretty-quick": "^3.1.3",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "typescript": "4.9.3",
+    "zone.js": "~0.13.0"
+  }
+}

package/projects/angular-sdk/src/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  buildVersion: '0.5.10'
+};

package/projects/angular-sdk/src/lib/components/access-key-management/access-key-management.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccessKeyManagementComponent } from './access-key-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeAccessKeyManagementWidget
+jest.mock('@descope/access-key-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-access-key-management-widget');
+  });
+});
+
+describe('DescopeAccessKeyManagementComponent', () => {
+  let component: AccessKeyManagementComponent;
+  let fixture: ComponentFixture<AccessKeyManagementComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onAccessKeyChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onAccessKeyChange: onAccessKeyChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(AccessKeyManagementComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.tenant = 'tenant-1';
+    component.widgetId = 'widget-1';
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-access-key-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-access-key-management-widget'
+    )!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+});

package/projects/angular-sdk/src/lib/components/access-key-management/access-key-management.component.ts

@@ -0,0 +1,63 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeAccessKeyManagementWidget from '@descope/access-key-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'access-key-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class AccessKeyManagementComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() tenant: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  private readonly webComponent = new DescopeAccessKeyManagementWidget();
+
+  constructor(
+    private elementRef: ElementRef,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+  }
+
+  ngOnInit() {
+    this.setupWebComponent();
+    this.elementRef.nativeElement.appendChild(this.webComponent);
+  }
+
+  ngOnChanges(): void {
+    this.setupWebComponent();
+  }
+
+  private setupWebComponent() {
+    this.webComponent.setAttribute('project-id', this.projectId);
+    this.webComponent.setAttribute('tenant', this.tenant);
+    this.webComponent.setAttribute('widget-id', this.widgetId);
+    if (this.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.theme) {
+      this.webComponent.setAttribute('theme', this.theme);
+    }
+    if (this.debug) {
+      this.webComponent.setAttribute('debug', this.debug.toString());
+    }
+
+    if (this.logger) {
+      (this.webComponent as any).logger = this.logger;
+    }
+  }
+}

package/projects/angular-sdk/src/lib/components/audit-management/audit-management.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuditManagementComponent } from './audit-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeAuditManagementWidget
+jest.mock('@descope/audit-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-audit-management-widget');
+  });
+});
+
+describe('DescopeAuditManagementComponent', () => {
+  let component: AuditManagementComponent;
+  let fixture: ComponentFixture<AuditManagementComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onAuditChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onAuditChange: onAuditChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(AuditManagementComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.tenant = 'tenant-1';
+    component.widgetId = 'widget-1';
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-audit-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-audit-management-widget'
+    )!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+});

package/projects/angular-sdk/src/lib/components/audit-management/audit-management.component.ts

@@ -0,0 +1,63 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeAuditManagementWidget from '@descope/audit-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'audit-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class AuditManagementComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() tenant: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  private readonly webComponent = new DescopeAuditManagementWidget();
+
+  constructor(
+    private elementRef: ElementRef,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+  }
+
+  ngOnInit() {
+    this.setupWebComponent();
+    this.elementRef.nativeElement.appendChild(this.webComponent);
+  }
+
+  ngOnChanges(): void {
+    this.setupWebComponent();
+  }
+
+  private setupWebComponent() {
+    this.webComponent.setAttribute('project-id', this.projectId);
+    this.webComponent.setAttribute('tenant', this.tenant);
+    this.webComponent.setAttribute('widget-id', this.widgetId);
+    if (this.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.theme) {
+      this.webComponent.setAttribute('theme', this.theme);
+    }
+    if (this.debug) {
+      this.webComponent.setAttribute('debug', this.debug.toString());
+    }
+
+    if (this.logger) {
+      (this.webComponent as any).logger = this.logger;
+    }
+  }
+}