@mathstack/app-kit 2.1.0 → 2.2.1

package/src/lib/documentation-display/documentation-display.component.scss

@@ -1,142 +0,0 @@
-@use '../baseline-styles/grid' as *;
-@use '../core/scss/placeholders' as *;
-@use '../core/scss/vars' as *;
-@use '../core/scss/colors';
-
-.documentation-container {
-  margin: 0 auto;
-  max-width: 1200px;
-
-  .documentation-content {
-    display: flex;
-    gap: grid(30);
-    margin-top: grid(6);
-  }
-
-  .document-index {
-    $top: grid(32);
-    display: block;
-    position: sticky;
-    top: $top;
-    max-height: calc(100vh - $top - grid(8));
-  }
-
-  .main-content {
-    width: 75%;
-  }
-
-  .nav-siblings {
-    padding-top: grid(10);
-    padding-bottom: grid(20);
-  }
-
-  .injected-html {
-    h1 {
-      @include headline-large;
-      margin: 0 0 grid(7) 0;
-      width: 100%;
-    }
-
-    h2 {
-      @include headline-small;
-    }
-
-    h3 {
-      @include label-large;
-    }
-
-    h2,
-    h3,
-    h4 {
-      margin: 0;
-      padding-top: grid(4);
-      padding-bottom: grid(6);
-    }
-
-    p {
-      padding-bottom: grid(6);
-      line-height: 1.8;
-    }
-
-    ol {
-      margin: 0;
-      padding-bottom: grid(6);
-    }
-
-    li > p:not(.code-caption) {
-      padding-bottom: grid(4);
-    }
-
-    pre {
-      margin: 0;
-      padding-bottom: grid(6);
-    }
-
-    a {
-      cursor: pointer;
-      color: colors.$primary-40;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    .shiki {
-      margin: 0;
-      padding: grid(4);
-      border: 1px solid colors.$muted-primary-90;
-      border-radius: grid(2);
-      margin-bottom: grid(8);
-      white-space: pre-wrap;
-    }
-
-    p.code-caption {
-      margin-bottom: 0;
-      padding-bottom: 0;
-      font-style: italic;
-
-      code {
-        font-style: normal;
-      }
-    }
-
-    p.code-caption + pre.shiki {
-      display: block;
-      margin-top: 2px;
-    }
-
-    p:has(> code) + hr {
-      margin: 0;
-      border-top: 1px solid colors.$muted-primary-80;
-      margin-bottom: grid(6);
-    }
-
-    P:has(> code):has(+ hr) {
-      padding-bottom: grid(2);
-    }
-
-    h1 > code,
-    h2 > code,
-    h3 > code,
-    h4 > code,
-    h5 > code,
-    h6 > code,
-    li > code,
-    li > em > code,
-    p > code p > em > code {
-      font-family: $font-mono;
-      font-weight: 500;
-      padding-left: grid(1);
-      padding-right: grid(1);
-      background: colors.$muted-primary-95;
-      border-radius: grid(1);
-      color: colors.$primary-40;
-      padding: grid(0.5) grid(1);
-    }
-
-    p > code,
-    p > em > code {
-      font-size: 15px;
-    }
-  }
-}

package/src/lib/documentation-display/documentation-display.component.ts

@@ -1,129 +0,0 @@
-import { CommonModule, DOCUMENT } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  DestroyRef,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  NgZone,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { Observable } from 'rxjs';
-import { ShikiTheme } from '../content-parsing';
-import { AdkActiveHeadingTracker } from './active-heading-tracker';
-import { AdkDocumentIndexComponent } from './document-index/document-index.component';
-import { AdkNestedObject } from './documentation-config-parser';
-import {
-  AdkDocumentationContentService,
-  AdkHtmlHeader,
-  AdkParsedDocumentation,
-} from './documentation-content-service';
-import { NavigationSiblingsComponent } from './navigation-siblings/navigation-siblings.component';
-
-@Component({
-  selector: 'hsi-adk-documentation-display',
-  imports: [
-    CommonModule,
-    AdkDocumentIndexComponent,
-    NavigationSiblingsComponent,
-  ],
-  templateUrl: './documentation-display.component.html',
-  styleUrls: ['./documentation-display.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AdkDocumentationDisplayComponent implements OnInit, AfterViewInit {
-  /**
-   * Observable that emits the current content path
-   */
-  @Input() contentPath$: Observable<string>;
-  @Input() fileConfig: AdkNestedObject;
-  @Input() highlightTheme: ShikiTheme;
-  @Input() pathFromAssetsToFile: string;
-  @Input() showPrevNextNavigation = true;
-  @Output() nextDoc: EventEmitter<string> = new EventEmitter<string>();
-  @ViewChild('file') file: ElementRef<HTMLDivElement>;
-  content$: Observable<AdkParsedDocumentation>;
-  @ContentChild('escapedContent', { static: false })
-  escapedContentTemplateRef: TemplateRef<unknown>;
-
-  private content = inject(AdkDocumentationContentService);
-  private activeHeading = inject(AdkActiveHeadingTracker);
-  private destroyRef = inject(DestroyRef);
-  private zone = inject(NgZone);
-  private document = inject(DOCUMENT);
-
-  ngOnInit(): void {
-    this.setContent();
-  }
-
-  ngAfterViewInit(): void {
-    this.activeHeading.initScrollListener(
-      this.file.nativeElement,
-      this.destroyRef
-    );
-  }
-
-  setContent(): void {
-    this.content$ = this.content.getContentForCurrentContentPath(
-      this.contentPath$,
-      {
-        fileConfig: this.fileConfig,
-        basePath: this.pathFromAssetsToFile,
-        parsingOptions: {
-          highlighter: {
-            theme: this.highlightTheme,
-          },
-        },
-      }
-    );
-  }
-
-  scrollToHeading(update: {
-    heading: AdkHtmlHeader;
-    event: KeyboardEvent | PointerEvent | MouseEvent | Event;
-  }): void {
-    const targetHeading = this.file.nativeElement.querySelector(
-      `#${update.heading.id}`
-    ) as HTMLHeadingElement;
-    targetHeading.focus();
-    this.scrollToItemById(
-      targetHeading,
-      (update.event as KeyboardEvent).key === 'Enter'
-    );
-  }
-
-  scrollToItemById(
-    item: HTMLHeadingElement,
-    needsChangeDetection = false
-  ): void {
-    this.activeHeading.setActiveHeading(item as HTMLHeadingElement);
-    const currentOffset = item.offsetTop;
-    if (needsChangeDetection) {
-      this.zone.run(() => {
-        this.scrollToItem(currentOffset);
-      });
-    } else {
-      this.scrollToItem(currentOffset);
-    }
-  }
-
-  scrollToItem(top: number): void {
-    this.document.getElementsByTagName('HTML')[0].scrollTo({
-      top,
-      behavior: 'smooth',
-    });
-  }
-
-  navigateToDoc(sibling: string): void {
-    this.nextDoc.emit(sibling);
-  }
-}

package/src/lib/documentation-display/index.ts

@@ -1,6 +0,0 @@
-export * from './active-heading-tracker';
-export * from './document-index/document-index.component';
-export * from './documentation-config-parser';
-export * from './documentation-content-service';
-export * from './documentation-display.component';
-export * from './navigation-siblings/navigation-siblings.component';

package/src/lib/documentation-display/navigation-siblings/navigation-siblings.component.html

@@ -1,31 +0,0 @@
-@if (siblings.previous) {
-  <div
-    class="nav-panel previous"
-    role="link"
-    tabindex="0"
-    (click)="navigateToDoc(siblings.previous)"
-    (keydown.enter)="navigateToDoc(siblings.previous)"
-    ><p class="label">Previous</p
-    ><p class="name"
-      ><span aria-hidden="true" class="material-symbols-outlined arrow"
-        >arrow_back</span
-      >{{ previous }}</p
-    ></div
-  >
-}
-@if (siblings.next) {
-  <div
-    class="nav-panel next"
-    role="link"
-    tabindex="0"
-    (click)="navigateToDoc(siblings.next)"
-    (keydown.enter)="navigateToDoc(siblings.next)"
-    ><p class="label">Next</p
-    ><p class="name"
-      >{{ next }}
-      <span aria-hidden="true" class="material-symbols-outlined arrow"
-        >arrow_forward</span
-      ></p
-    ></div
-  >
-}

package/src/lib/documentation-display/navigation-siblings/navigation-siblings.component.scss

@@ -1,68 +0,0 @@
-@use '../../baseline-styles/grid' as *;
-@use '../../core/scss/placeholders' as *;
-@use '../../core/scss/colors';
-
-:host {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas: 'previous next';
-  gap: grid(4);
-}
-
-.nav-panel {
-  border: 1px solid colors.$muted-primary-80;
-  padding: grid(4);
-  border-radius: grid(2);
-  cursor: pointer;
-}
-
-.nav-panel:hover {
-  background: colors.$primary-98;
-  border: 1px solid colors.$primary-70;
-}
-
-.nav-panel.previous {
-  grid-area: previous;
-}
-
-.nav-panel.next {
-  grid-area: next;
-  text-align: right;
-
-  .name {
-    justify-content: flex-end;
-  }
-
-  .label {
-    justify-content: flex-end;
-  }
-}
-
-.label {
-  @include label-2xs-caps;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-top: grid(2);
-  color: colors.$primary-40;
-}
-
-.arrow {
-  transform: scale(0.8);
-  position: relative;
-  top: -1px;
-}
-
-.previous .name {
-  left: -6px;
-}
-
-.next .name {
-  right: -6px;
-}

package/src/lib/documentation-display/navigation-siblings/navigation-siblings.component.ts

@@ -1,52 +0,0 @@
-import { CommonModule, TitleCasePipe } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  Output,
-} from '@angular/core';
-import { AdkDocumentationNavigationSiblings } from '../documentation-config-parser';
-
-@Component({
-  selector: 'hsi-adk-navigation-siblings',
-  imports: [CommonModule],
-  providers: [TitleCasePipe],
-  templateUrl: './navigation-siblings.component.html',
-  styleUrls: ['./navigation-siblings.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NavigationSiblingsComponent implements OnChanges {
-  @Input() siblings: AdkDocumentationNavigationSiblings;
-  @Output() nextDoc: EventEmitter<string> = new EventEmitter<string>();
-  previous: string;
-  next: string;
-
-  private titleCase = inject(TitleCasePipe);
-
-  ngOnChanges(): void {
-    this.setDisplayNames();
-  }
-
-  setDisplayNames(): void {
-    this.previous = this.siblings.previous
-      ? this.getDisplayName(this.siblings.previous)
-      : undefined;
-    this.next = this.siblings.next
-      ? this.getDisplayName(this.siblings.next)
-      : undefined;
-  }
-
-  getDisplayName(path: string): string {
-    const paths = path.split('/');
-    const end = paths[paths.length - 1];
-    const dehyphenated = end.replace(/-/g, ' ');
-    return this.titleCase.transform(dehyphenated);
-  }
-
-  navigateToDoc(sibling: string): void {
-    this.nextDoc.emit(sibling);
-  }
-}

package/src/lib/ng-utilities/index.ts

@@ -1,2 +0,0 @@
-export * from './ng-on-changes';
-export * from './run-ng-change-detection-then';

package/src/lib/ng-utilities/ng-on-changes.spec.ts

@@ -1,117 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { SimpleChange } from '@angular/core';
-import { NgOnChangesUtilities } from './ng-on-changes';
-
-describe('ngInputObjectChangedNotFirstTime()', () => {
-  let ngInputObjectChanged: jasmine.Spy;
-  let changes: any;
-  let inputName: string;
-  beforeEach(() => {
-    ngInputObjectChanged = spyOn(
-      NgOnChangesUtilities,
-      'inputObjectChanged'
-    ).and.returnValue(true);
-    inputName = 'test';
-    changes = {
-      [inputName]: {
-        previousValue: '',
-        currentValue: '',
-        isFirstChange: () => false,
-      },
-    };
-  });
-
-  describe('if input has changed', () => {
-    describe('if it is not the first change', () => {
-      it('returns true if objectChanges returns true', () => {
-        const result = NgOnChangesUtilities.inputObjectChangedNotFirstTime(
-          changes,
-          inputName
-        );
-        expect(result).toEqual(true);
-      });
-
-      it('returns false if objectOnNgChanges returns false', () => {
-        ngInputObjectChanged.and.returnValue(false);
-        const result = NgOnChangesUtilities.inputObjectChangedNotFirstTime(
-          changes,
-          inputName
-        );
-        expect(result).toEqual(false);
-      });
-    });
-
-    it('returns false if it is the first change', () => {
-      changes[inputName].isFirstChange = () => true;
-      const result = NgOnChangesUtilities.inputObjectChangedNotFirstTime(
-        changes,
-        inputName
-      );
-      expect(result).toEqual(false);
-    });
-  });
-
-  it('returns false if changes does not have property for input string', () => {
-    changes = { wrong: new SimpleChange('', '', false) };
-    const result = NgOnChangesUtilities.inputObjectChangedNotFirstTime(
-      changes,
-      inputName
-    );
-    expect(result).toEqual(false);
-  });
-});
-
-describe('ngInputObjectChanged()', () => {
-  let changes: any;
-  let objectName: string;
-  let prevObj: any;
-  let currObj: any;
-  beforeEach(() => {
-    objectName = 'test';
-    prevObj = { hello: 'world' };
-    currObj = { hello: 'earth' };
-    changes = {
-      [objectName]: {
-        previousValue: prevObj,
-        currentValue: currObj,
-        isFirstChange: () => false,
-      },
-    };
-  });
-
-  describe('if testObject has changed', () => {
-    describe('if it is not the first change', () => {
-      it('returns true if previous testObject value does not equal current testObject value -- deep check', () => {
-        const result = NgOnChangesUtilities.inputObjectChanged(
-          changes,
-          objectName
-        );
-        expect(result).toEqual(true);
-      });
-      it('returns true if previous testObject value does not equal current testObject value -- deep check, with property name', () => {
-        const result = NgOnChangesUtilities.inputObjectChanged(
-          changes,
-          objectName,
-          'hello'
-        );
-        expect(result).toEqual(true);
-      });
-      it('returns false if previous testObject equals current testObject value -- deep check', () => {
-        changes = {
-          [objectName]: new SimpleChange(prevObj, { hello: 'world' }, false),
-        };
-        const result = NgOnChangesUtilities.inputObjectChanged(
-          changes,
-          objectName
-        );
-        expect(result).toEqual(false);
-      });
-    });
-  });
-
-  it('returns false if changes does not have property for input string', () => {
-    changes = { wrong: new SimpleChange('', '', false) };
-    const result = NgOnChangesUtilities.inputObjectChanged(changes, objectName);
-    expect(result).toEqual(false);
-  });
-});

package/src/lib/ng-utilities/ng-on-changes.ts

@@ -1,50 +0,0 @@
-import { SimpleChanges } from '@angular/core';
-import { get, isEqual } from 'lodash-es';
-
-/**
- * A utility class for detecting changes to objects in Angular's ngOnChanges lifecycle hook.
- */
-export class NgOnChangesUtilities {
-  /**
-   * Checks if an input object has changed since the first change.
-   * @param changes - The SimpleChanges object containing the changes.
-   * @param inputName - The name of the input property to check.
-   * @param property - Optional specific property to check within the input object.
-   * @returns True if the input object has changed since the first change, otherwise false.
-   */
-  static inputObjectChangedNotFirstTime(
-    changes: SimpleChanges,
-    inputName: string,
-    property?: string
-  ): boolean {
-    return (
-      changes[inputName] !== undefined &&
-      !changes[inputName].isFirstChange() &&
-      this.inputObjectChanged(changes, inputName, property)
-    );
-  }
-
-  /**
-   * Checks if an input object has changed.
-   * @param changes - The SimpleChanges object containing the changes.
-   * @param inputName - The name of the input property to check.
-   * @param property - Optional specific property to check within the input object.
-   * @returns True if the input object has changed, otherwise false.
-   */
-  static inputObjectChanged(
-    changes: SimpleChanges,
-    inputName: string,
-    property?: string
-  ): boolean {
-    let prevAccessor = `${inputName}.previousValue`;
-    let currAccessor = `${inputName}.currentValue`;
-    if (property) {
-      prevAccessor += `.${property}`;
-      currAccessor += `.${property}`;
-    }
-    return (
-      changes[inputName] !== undefined &&
-      !isEqual(get(changes, prevAccessor), get(changes, currAccessor))
-    );
-  }
-}

package/src/lib/ng-utilities/run-ng-change-detection-then.ts

@@ -1,40 +0,0 @@
-import { NgZone } from '@angular/core';
-import { Observable, switchMap } from 'rxjs';
-
-/**
- *
- * @param zone: NgZone
- * @returns (source: Observable<T>) => Observable<void>
- *
- * A custom RxJS operator that runs an Angular change detection cycle after the source observable emits, and waits until the change detection cycle is complete before emitting the next value.
- *
- * Note that this is not intended to be used frequently. It is a workaround for cases where you need to ensure that Angular has completed change detection before continuing with the next operation, for example when you need to access a DOM element that is being created through multiple levels of content projection.
- *
- * @example
- * ```ts
- * this.myObservable.pipe(
- *   runNgChangeDetectionThen(this.zone),
- *   subscribe(() => {
- *    console.log('a change detection cycle has completed');
- *   })
- * );
- * ```
- */
-export function runNgChangeDetectionThen<T>(
-  zone: NgZone
-): (source: Observable<T>) => Observable<void> {
-  return function <T>(source: Observable<T>): Observable<void> {
-    return source.pipe(
-      switchMap(
-        () =>
-          new Promise<void>((resolve) => {
-            zone.run(() => {
-              Promise.resolve().then(() => {
-                resolve();
-              });
-            });
-          })
-      )
-    );
-  };
-}

package/src/public-api.ts

@@ -1,6 +0,0 @@
-export * from './lib/assets';
-export * from './lib/content-parsing';
-export * from './lib/core/utilities/index';
-export * from './lib/documentation-display';
-export * from './lib/ng-utilities';
-export const STYLES_PATH = './lib/styles/_index.scss';

package/tsconfig.lib.json

@@ -1,16 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "paths": {
-      "@mathstack/*": ["dist/*"]
-    }
-  },
-  "exclude": ["**/*.spec.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": ["jasmine"]
-  },
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
-}