@opendevstack/ngx-appshell 19.0.5

package/lib/components/appshell-toasts/appshell-toasts.component.d.ts

@@ -0,0 +1,14 @@
+import { OnInit } from '@angular/core';
+import { AppShellToastService } from '../../services/appshell-toast.service';
+import { AppShellToast } from '../../models/appshell-toast';
+import * as i0 from "@angular/core";
+export declare class AppShellToastsComponent implements OnInit {
+    private readonly toastService;
+    toastsLimit: import("@angular/core").InputSignal<number>;
+    toasts: AppShellToast[];
+    constructor(toastService: AppShellToastService);
+    ngOnInit(): void;
+    closeToast(id: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellToastsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShellToastsComponent, "appshell-toasts", never, { "toastsLimit": { "alias": "toastsLimit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/index.d.ts

@@ -0,0 +1,15 @@
+export * from './appshell-breadcrumb/appshell-breadcrumb.component';
+export * from './appshell-chip/appshell-chip.component';
+export * from './appshell-page-header/appshell-page-header.component';
+export * from './appshell-filters/appshell-filters.component';
+export * from './appshell-header/appshell-header.component';
+export * from './appshell-icon/appshell-icon.component';
+export * from './appshell-layout/appshell-layout.component';
+export * from './appshell-platform-header/appshell-platform-header.component';
+export * from './appshell-platform-layout/appshell-platform-layout.component';
+export * from './appshell-product-card/appshell-product-card.component';
+export * from './appshell-product-card-v2/appshell-product-card-v2.component';
+export * from './appshell-select/appshell-select.component';
+export * from './appshell-sidebar-menu/appshell-sidebar-menu.component';
+export * from './appshell-toast/appshell-toast.component';
+export * from './appshell-toasts/appshell-toasts.component';

package/lib/directives/appshell-link.directive.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class AppShellLinkDirective implements OnChanges {
+    private readonly el;
+    private readonly router;
+    private readonly renderer;
+    link: string;
+    constructor(el: ElementRef, router: Router, renderer: Renderer2);
+    ngOnChanges(changes: SimpleChanges): void;
+    onClick(event: UIEvent): void;
+    private isExternalLink;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellLinkDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AppShellLinkDirective, "[appShellLink]", never, { "link": { "alias": "appShellLink"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directives/index.d.ts

@@ -0,0 +1 @@
+export * from './appshell-link.directive';

package/lib/models/appshell-button.d.ts

@@ -0,0 +1,5 @@
+export interface AppShellButton {
+    label?: string;
+    disabled?: boolean;
+    tooltip?: string;
+}

package/lib/models/appshell-filter.d.ts

@@ -0,0 +1,4 @@
+import { AppShellTag } from "./appshell-tag";
+export interface AppShellFilter extends AppShellTag {
+    placeholder: string;
+}

package/lib/models/appshell-link.d.ts

@@ -0,0 +1,6 @@
+export interface AppShellLink {
+    label?: string;
+    anchor: string;
+    icon?: string;
+    target?: string;
+}

package/lib/models/appshell-links-group.d.ts

@@ -0,0 +1,5 @@
+import { AppShellLink } from "./appshell-link";
+export interface AppShellLinksGroup {
+    label: string;
+    links: AppShellLink[];
+}

package/lib/models/appshell-notification.d.ts

@@ -0,0 +1,10 @@
+export interface AppShellNotification {
+    id: string;
+    subject: string;
+    type?: 'info' | 'success' | 'error';
+    title?: string;
+    message?: string;
+    date?: Date;
+    expanded?: boolean;
+    read: boolean;
+}

package/lib/models/appshell-picker.d.ts

@@ -0,0 +1,9 @@
+export interface AppShellPicker {
+    label: string;
+    options: string[];
+    selected?: string;
+    noOptionsTitle?: string;
+    noOptionsMessage?: string;
+    noFilteredOptionsTitle?: string;
+    noFilteredOptionsMessage?: string;
+}

package/lib/models/appshell-product.d.ts

@@ -0,0 +1,12 @@
+import { AppShellTag } from "./appshell-tag";
+export interface AppShellProduct {
+    id: string;
+    title: string;
+    shortDescription: string;
+    description: string;
+    image?: string;
+    link?: string;
+    tags?: AppShellTag[];
+    authors: string[];
+    date?: Date;
+}

package/lib/models/appshell-tag.d.ts

@@ -0,0 +1,4 @@
+export interface AppShellTag {
+    label: string;
+    options: string[];
+}

package/lib/models/appshell-toast.d.ts

@@ -0,0 +1,6 @@
+import { AppShellNotification } from "./appshell-notification";
+export interface AppShellToast {
+    id: number;
+    notification: AppShellNotification;
+    closeFn: () => void;
+}

package/lib/models/appshell-user.d.ts

@@ -0,0 +1,5 @@
+export interface AppShellUser {
+    fullName: string;
+    username: string;
+    avatarSrc?: string;
+}

package/lib/models/index.d.ts

@@ -0,0 +1,10 @@
+export * from './appshell-button';
+export * from './appshell-tag';
+export * from './appshell-filter';
+export * from './appshell-link';
+export * from './appshell-links-group';
+export * from './appshell-product';
+export * from './appshell-user';
+export * from './appshell-picker';
+export * from './appshell-notification';
+export * from './appshell-toast';

package/lib/screens/appshell-notifications-screen/appshell-notifications-screen.component.d.ts

@@ -0,0 +1,23 @@
+import { AppShellLink } from '../../models/appshell-link';
+import { AppShellNotification } from 'ngx-appshell';
+import { MarkdownService } from 'ngx-markdown';
+import * as i0 from "@angular/core";
+export declare class AppShellNotificationsScreenComponent {
+    private readonly markdownService;
+    pageTitle: import("@angular/core").InputSignal<string>;
+    breadcrumbLinks: import("@angular/core").InputSignal<AppShellLink[]>;
+    notifications: import("@angular/core").InputSignal<AppShellNotification[]>;
+    computedNotifications: import("@angular/core").Signal<AppShellNotification[]>;
+    readNotification: import("@angular/core").OutputEmitterRef<AppShellNotification>;
+    readAllNotifications: import("@angular/core").OutputEmitterRef<void>;
+    expandedNotifications: string[];
+    constructor(markdownService: MarkdownService);
+    getIcon(notification: AppShellNotification): string;
+    getIconClasses(notification: AppShellNotification): string;
+    expandNotification(notification: AppShellNotification): void;
+    isNotificationExpanded(notification: AppShellNotification): boolean;
+    markAsRead(notification: AppShellNotification): void;
+    markAllAsRead(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellNotificationsScreenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShellNotificationsScreenComponent, "appshell-notifications-screen", never, { "pageTitle": { "alias": "pageTitle"; "required": true; "isSignal": true; }; "breadcrumbLinks": { "alias": "breadcrumbLinks"; "required": true; "isSignal": true; }; "notifications": { "alias": "notifications"; "required": true; "isSignal": true; }; }, { "readNotification": "readNotification"; "readAllNotifications": "readAllNotifications"; }, never, never, true, never>;
+}

package/lib/screens/appshell-product-catalog-screen/appshell-product-catalog-screen.component.d.ts

@@ -0,0 +1,16 @@
+import { AppShellLink } from '../../models/appshell-link';
+import { AppShellProduct } from '../../models/appshell-product';
+import { AppShellFilter } from '../../models/appshell-filter';
+import * as i0 from "@angular/core";
+export declare class AppShellProductCatalogScreenComponent {
+    pageTitle: import("@angular/core").InputSignal<string>;
+    breadcrumbLinks: import("@angular/core").InputSignal<AppShellLink[]>;
+    products: import("@angular/core").InputSignal<AppShellProduct[]>;
+    filters: import("@angular/core").InputSignal<AppShellFilter[]>;
+    noProductsIcon: import("@angular/core").InputSignal<string | undefined>;
+    noProductsHtmlMessage: import("@angular/core").InputSignal<string | undefined>;
+    activeFiltersChange: import("@angular/core").OutputEmitterRef<Map<string, string[]>>;
+    getProductLabels(product: AppShellProduct): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellProductCatalogScreenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShellProductCatalogScreenComponent, "appshell-product-catalog-screen", never, { "pageTitle": { "alias": "pageTitle"; "required": true; "isSignal": true; }; "breadcrumbLinks": { "alias": "breadcrumbLinks"; "required": true; "isSignal": true; }; "products": { "alias": "products"; "required": true; "isSignal": true; }; "filters": { "alias": "filters"; "required": true; "isSignal": true; }; "noProductsIcon": { "alias": "noProductsIcon"; "required": false; "isSignal": true; }; "noProductsHtmlMessage": { "alias": "noProductsHtmlMessage"; "required": false; "isSignal": true; }; }, { "activeFiltersChange": "activeFiltersChange"; }, never, never, true, never>;
+}

package/lib/screens/appshell-product-view-screen/appshell-product-view-screen.component.d.ts

@@ -0,0 +1,19 @@
+import { AppShellLink } from '../../models/appshell-link';
+import { AppShellProduct } from '../../models/appshell-product';
+import { AppShellPicker } from '../../models/appshell-picker';
+import { AppShellButton } from '../../models/appshell-button';
+import * as i0 from "@angular/core";
+export declare class AppShellProductViewScreenComponent {
+    pageTitle: import("@angular/core").InputSignal<string>;
+    breadcrumbLinks: import("@angular/core").InputSignal<AppShellLink[]>;
+    actionButton: import("@angular/core").InputSignal<AppShellButton | undefined>;
+    actionButtonClicked: import("@angular/core").OutputEmitterRef<void>;
+    product: import("@angular/core").InputSignal<AppShellProduct>;
+    secondaryButton: import("@angular/core").InputSignal<AppShellButton | undefined>;
+    secondaryButtonClicked: import("@angular/core").OutputEmitterRef<void>;
+    actionPicker: import("@angular/core").InputSignal<AppShellPicker | undefined>;
+    actionPick: import("@angular/core").OutputEmitterRef<string>;
+    productLabels: import("@angular/core").Signal<string[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellProductViewScreenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShellProductViewScreenComponent, "appshell-product-view-screen", never, { "pageTitle": { "alias": "pageTitle"; "required": true; "isSignal": true; }; "breadcrumbLinks": { "alias": "breadcrumbLinks"; "required": true; "isSignal": true; }; "actionButton": { "alias": "actionButton"; "required": false; "isSignal": true; }; "product": { "alias": "product"; "required": true; "isSignal": true; }; "secondaryButton": { "alias": "secondaryButton"; "required": false; "isSignal": true; }; "actionPicker": { "alias": "actionPicker"; "required": false; "isSignal": true; }; }, { "actionButtonClicked": "actionButtonClicked"; "secondaryButtonClicked": "secondaryButtonClicked"; "actionPick": "actionPick"; }, never, never, true, never>;
+}

package/lib/screens/index.d.ts

@@ -0,0 +1,3 @@
+export * from './appshell-product-catalog-screen/appshell-product-catalog-screen.component';
+export * from './appshell-product-view-screen/appshell-product-view-screen.component';
+export * from './appshell-notifications-screen/appshell-notifications-screen.component';

package/lib/services/appshell-toast.service.d.ts

@@ -0,0 +1,12 @@
+import { AppShellNotification, AppShellToast } from 'ngx-appshell';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class AppShellToastService {
+    toastsSubject: BehaviorSubject<AppShellToast[]>;
+    toasts$: import("rxjs").Observable<AppShellToast[]>;
+    private currentId;
+    showToast(notification: AppShellNotification, duration?: number, closeFn?: () => void): void;
+    removeToast(id: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AppShellToastService>;
+}

package/lib/services/icon-registry.service.d.ts

@@ -0,0 +1,14 @@
+import { HttpBackend } from '@angular/common/http';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class IconRegistryService {
+    private matIconRegistry;
+    private sanitizer;
+    private namespace;
+    private http;
+    constructor(httpBackend: HttpBackend, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
+    registerIconsFromManifest(manifestUrl?: string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconRegistryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<IconRegistryService>;
+}

package/lib/services/index.d.ts

@@ -0,0 +1,2 @@
+export * from './appshell-toast.service';
+export * from './icon-registry.service';

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@opendevstack/ngx-appshell",
+  "version": "19.0.5",
+  "description": "A comprehensive Angular library providing pre-built UI components, directives, and schematics for building modern enterprise applications with Material Design.",
+  "author": "OpenDevStack",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opendevstack/ods-ngx-appshell.git"
+  },
+  "license": "Apache-2.0",
+  "ng-add": {
+    "save": "true"
+  },
+  "schematics": "./schematics/collection.json",
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/material": ">=19.0.0",
+    "@angular/animations": ">=19.0.0"
+  },
+  "dependencies": {
+    "@angular/material": "19.2.16",
+    "@azure/msal-angular": "3.1.0",
+    "@azure/msal-browser": "3.27.0",
+    "@nats-io/nats-core": "3.0.0",
+    "@nats-io/jetstream": "3.0.0",
+    "@nats-io/kv": "3.0.0",
+    "marked": "15.0.11",
+    "ngx-markdown": "19.1.1",
+    "tslib": "2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/opendevstack-ngx-appshell.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/opendevstack-ngx-appshell.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/components';
+export * from './lib/directives';
+export * from './lib/models';
+export * from './lib/screens';
+export * from './lib/services';

package/schematics/azure-login/files/app-config/config.json.template

@@ -0,0 +1,12 @@
+{
+  "msalConfig": {
+    "auth": {
+      "clientId": "ENTER_CLIENT_ID",
+      "authority": "ENTER_AUTHORITY"
+    }
+  },
+  "apiConfig": {
+    "scopes": ["ENTER_SCOPE"],
+    "uri": "ENTER_AUTHORITY"
+  }
+}

package/schematics/azure-login/files/app-config-service/app-config.service.spec.ts.template

@@ -0,0 +1,48 @@
+import { TestBed } from '@angular/core/testing';
+import { AppConfigService } from './app-config.service';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('AppConfigService', () => {
+  let service: AppConfigService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AppConfigService, provideHttpClientTesting()]
+    });
+    service = TestBed.inject(AppConfigService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should load config', async () => {
+    const mockConfig = { apiUrl: 'http://example.com' };
+
+    const loadConfigPromise = service.loadConfig();
+    const req = httpMock.expectOne('./config/config.json');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockConfig);
+
+    await loadConfigPromise;
+    expect(service.getConfig()).toEqual(mockConfig);
+  });
+
+  it('should handle error when loading config', async () => {
+    const consoleSpy = spyOn(console, 'error');
+
+    const loadConfigPromise = service.loadConfig();
+    const req = httpMock.expectOne('./config/config.json');
+    req.error(new ErrorEvent('Network error'));
+
+    await loadConfigPromise;
+    expect(consoleSpy).toHaveBeenCalled();
+    expect(service.getConfig()).toBeUndefined();
+  });
+});

package/schematics/azure-login/files/app-config-service/app-config.service.ts.template

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpBackend, HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppConfigService {
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private config: any;
+  
+  private http: HttpClient;
+  
+  /**
+   * We are not injecting HttpClient, because if you inject HttpClient then angular first resolve all the HTTP_INTERCEPTORS, 
+   * and when you provide MsalInterceptor, this makes angular to load MsalService and other component used by Msalinterceptor load before APP_INITIALIZER.
+   * To resolve this issue we need to by pass HTTP_INTERCEPTORS, so for this we can use HttpBackend handler, and then create local instance of HttpClient.
+   * This will bypass the HTTP_INTERCEPTORS, while getting config file.
+   * More info: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1403
+   */
+  constructor(private readonly httpHandler: HttpBackend) {
+    this.http = new HttpClient(this.httpHandler);
+  }
+  
+  async loadConfig(): Promise<void> {
+    return firstValueFrom(this.http.get('./config/config.json'))
+      .then((config) => {
+        this.config = config;
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  
+  getConfig() {
+    return this.config;
+  }
+}

package/schematics/azure-login/files/azure-config/azure.config.ts.template

@@ -0,0 +1,94 @@
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import {
+  IPublicClientApplication,
+  PublicClientApplication,
+  InteractionType,
+  BrowserCacheLocation,
+  LogLevel,
+} from '@azure/msal-browser';
+import {
+  MsalInterceptor,
+  MSAL_INSTANCE,
+  MsalInterceptorConfiguration,
+  MsalGuardConfiguration,
+  MSAL_GUARD_CONFIG,
+  MSAL_INTERCEPTOR_CONFIG,
+  MsalService,
+  MsalGuard,
+  MsalBroadcastService,
+} from '@azure/msal-angular';
+import { AppConfigService } from './services/app-config.service';
+
+export function loggerCallback(logLevel: LogLevel, message: string) {
+  console.log(message);
+}
+
+export function MSALInstanceFactory(config: AppConfigService): IPublicClientApplication {
+  return new PublicClientApplication({
+    auth: {
+      clientId: config.getConfig()?.msalConfig?.auth?.clientId,
+      authority: config.getConfig()?.msalConfig?.auth?.authority,
+      redirectUri: '/'
+    },
+    cache: {
+      cacheLocation: BrowserCacheLocation.LocalStorage,
+    },
+    system: {
+      allowNativeBroker: false, // Disables WAM Broker
+      loggerOptions: {
+        loggerCallback,
+        logLevel: LogLevel.Warning,
+        piiLoggingEnabled: false,
+      },
+    },
+  });
+}
+
+export function MSALInterceptorConfigFactory(config: AppConfigService): MsalInterceptorConfiguration {
+  const protectedResourceMap = new Map<string, string[]>();
+  protectedResourceMap.set(
+    config.getConfig()?.apiConfig?.uri,
+    config.getConfig()?.apiConfig?.scopes
+  );
+
+  return {
+    interactionType: InteractionType.Redirect,
+    protectedResourceMap,
+  };
+}
+
+export function MSALGuardConfigFactory(config: AppConfigService): MsalGuardConfiguration {;
+  return {
+    interactionType: InteractionType.Redirect,
+    authRequest: {
+      scopes: [...config.getConfig()?.apiConfig?.scopes || []],
+    },
+    loginFailedRoute: '/login-failed',
+  };
+}
+
+export const msalProviders = [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: MsalInterceptor,
+      multi: true,
+    },
+    {
+      provide: MSAL_INSTANCE,
+      useFactory: MSALInstanceFactory,
+      deps: [AppConfigService]
+    },
+    {
+      provide: MSAL_GUARD_CONFIG,
+      useFactory: MSALGuardConfigFactory,
+      deps: [AppConfigService]
+    },
+    {
+      provide: MSAL_INTERCEPTOR_CONFIG,
+      useFactory: MSALInterceptorConfigFactory,
+      deps: [AppConfigService]
+    },
+    MsalService,
+    MsalGuard,
+    MsalBroadcastService,
+];