@c8y/api-doc 1023.48.0

package/src/app/swagger/swagger.component.ts

@@ -0,0 +1,94 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  OnDestroy,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FetchClient } from '@c8y/client';
+import {
+  ActionBarItemComponent,
+  C8yTranslatePipe,
+  IconDirective,
+  TitleComponent,
+  UserPreferencesService
+} from '@c8y/ngx-components';
+import { firstValueFrom, map, shareReplay, Subject, switchMap, takeUntil } from 'rxjs';
+import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle';
+import { ApiDocService } from '../api-doc.service';
+
+@Component({
+  selector: 'api-swagger',
+  templateUrl: './swagger.component.html',
+  styleUrls: ['./swagger.component.less'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [IconDirective, ActionBarItemComponent, C8yTranslatePipe, TitleComponent, AsyncPipe]
+})
+export class SwaggerComponent implements OnDestroy, AfterViewInit {
+  @ViewChild('apiDocElement', { static: true }) apiDocElement: ElementRef | undefined;
+  private fetchClient = inject(FetchClient);
+  private activatedRoute = inject(ActivatedRoute);
+  private apiDocService = inject(ApiDocService);
+  private destroy$ = new Subject<void>();
+  private userPreferences = inject(UserPreferencesService);
+
+  shouldHideAlert$ = this.userPreferences.observe<boolean>('apiDocHideAuthAlert');
+  spec$ = this.activatedRoute.paramMap.pipe(
+    map(params => params.get('id')),
+    switchMap(id => this.apiDocService.getApiDocById(id)),
+    switchMap(app => {
+      const specPath = app.downloadPath;
+      const isYaml = specPath.endsWith('.yaml') || specPath.endsWith('.yml');
+      return this.fetchClient
+        .fetch(app.downloadPath)
+        .then(response => (isYaml ? response.text() : response.json()))
+        .then(data => ({ app, data, isYaml }));
+    }),
+    shareReplay(1)
+  );
+
+  hideAlert() {
+    this.userPreferences.set('apiDocHideAuthAlert', true);
+  }
+
+  async downloadSpecFile() {
+    const { app, data, isYaml } = await firstValueFrom(this.spec$);
+    const content = isYaml ? data : JSON.stringify(data, null, 2);
+    const mimeType = isYaml ? 'application/x-yaml' : 'application/json';
+    const extension = isYaml ? 'yaml' : 'json';
+    const blob = new Blob([content], { type: mimeType });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${app.name}-openapi-spec.${extension}`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  async ngAfterViewInit() {
+    this.spec$.pipe(takeUntil(this.destroy$)).subscribe(({ app, data, isYaml }) => {
+      SwaggerUI({
+        ...(isYaml ? { url: app.downloadPath } : { spec: data }),
+        domNode: this.apiDocElement?.nativeElement,
+        requestInterceptor: (req: RequestInit) => {
+          if (!req.headers) {
+            req.headers = {};
+          }
+
+          const fetchOptions = this.fetchClient.getFetchOptions();
+          Object.assign(req.headers, fetchOptions?.headers || {});
+          return req;
+        }
+      });
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/bootstrap.ts

@@ -0,0 +1,18 @@
+import './polyfills';
+import '@angular/compiler';
+
+import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapComponent, provideBootstrapMetadata } from '@c8y/ngx-components';
+import { BootstrapMetaData } from '@c8y/bootstrap';
+import { appConfig } from './app/app.config';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+  enableProdMode();
+}
+
+export function bootstrap(metadata: BootstrapMetaData) {
+  appConfig.providers.push(...provideBootstrapMetadata(metadata));
+  return bootstrapApplication(BootstrapComponent, appConfig).catch(err => console.log(err));
+}

package/src/i18n.ts

@@ -0,0 +1,18 @@
+/**
+ * Internationalizing files in po format (https://en.wikipedia.org/wiki/Gettext#Translating)
+ * You can always add additional strings by adding your own po file. All po files are
+ * combined to one JSON file per language and are loaded if the specific language is needed.
+ */
+import '@c8y/ngx-components/locales/de.po';
+import '@c8y/ngx-components/locales/en.po';
+import '@c8y/ngx-components/locales/en_US.po';
+import '@c8y/ngx-components/locales/es.po';
+import '@c8y/ngx-components/locales/fr.po';
+import '@c8y/ngx-components/locales/ja_JP.po';
+import '@c8y/ngx-components/locales/ko.po';
+import '@c8y/ngx-components/locales/nl.po';
+import '@c8y/ngx-components/locales/pl.po';
+import '@c8y/ngx-components/locales/pt_BR.po';
+import '@c8y/ngx-components/locales/zh_CN.po';
+import '@c8y/ngx-components/locales/zh_TW.po';
+// import './locales/de.po'; // <- adding additional strings to the german translation.

package/src/main.ts

@@ -0,0 +1,17 @@
+import './i18n';
+
+const barHolder: HTMLElement | null = document.querySelector('body > .init-load');
+export const removeProgress = () => barHolder?.parentNode?.removeChild(barHolder);
+
+applicationSetup();
+
+async function applicationSetup() {
+  const { loadMetaDataAndPerformBootstrap } = await import('@c8y/bootstrap');
+  const loadBootstrapModule = () =>
+    import(
+      /* webpackPreload: true */
+      './bootstrap'
+    );
+
+  loadMetaDataAndPerformBootstrap(loadBootstrapModule).then(removeProgress);
+}

package/src/polyfills.ts

@@ -0,0 +1,33 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'message'];
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.

package/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "noImplicitOverride": false,
+    "skipLibCheck": true,
+    "strict": false
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "../ngx-components/**/*.ts"
+  ],
+  "exclude": [
+    "../ngx-components/dist",
+    "../ngx-components/**/*.spec.ts",
+  ]
+}