@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-spinner/src/onemrva-mat-spinner.component.ts

@@ -1,52 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-
-@Component({
-  selector: 'onemrva-mat-spinner',
-  templateUrl: 'onemrva-mat-spinner.component.html',
-})
-export class OnemrvaMatSpinnerComponent {
-  @Input()
-  color: OnemrvaMatColor = OnemrvaMatColor.PRIMARY;
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-accent')
-  public get _colorAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-primary')
-  public get _isPrimary(): boolean {
-    return this.color === OnemrvaMatColor.PRIMARY;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-accent')
-  public get _isAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-error')
-  public get _isError(): boolean {
-    return this.color === OnemrvaMatColor.ERROR;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-warn')
-  public get _isWarn(): boolean {
-    return this.color === OnemrvaMatColor.WARN;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-success')
-  public get _isSuccess(): boolean {
-    return this.color === OnemrvaMatColor.SUCCESS;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-info')
-  public get _isInfo(): boolean {
-    return this.color === OnemrvaMatColor.INFO;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-grayscale')
-  public get _isGrayscale(): boolean {
-    return this.color === OnemrvaMatColor.GRAYSCALE;
-  }
-}

package/mat-spinner/src/onemrva-mat-spinner.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { OnemrvaMatSpinnerComponent } from './onemrva-mat-spinner.component';
-import { OnemrvaMatLoadingDirective } from './onemrva-mat-loading.directive';
-
-@NgModule({
-  declarations: [OnemrvaMatSpinnerComponent],
-  exports: [OnemrvaMatSpinnerComponent, OnemrvaMatLoadingDirective],
-  imports: [OnemrvaMatLoadingDirective],
-})
-export class OnemrvaMatSpinnerModule {}

package/mat-stepper/index.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of mat-summary-stepper
- */
-
-export * from './src/onemrva-mat-stepper.component';
-export * from './src/onemrva-mat-stepper.module';

package/mat-stepper/ng-package.json

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

package/mat-stepper/src/_stepper-variables.scss

@@ -1,29 +0,0 @@
-$header-height: 72px !default;
-// Minimum height for highest density summary-stepper's is determined based on how much
-// summary-stepper headers can shrink until the step icon or step label exceed. We can't use
-// a value below `42px` because the optional label for steps would otherwise exceed.
-$header-minimum-height: 42px !default;
-$header-maximum-height: $header-height !default;
-
-$density-config: (
-  height: (
-    default: $header-height,
-    maximum: $header-maximum-height,
-    minimum: $header-minimum-height,
-  ),
-) !default;
-
-// Note: These variables are not denoted with `!default` because they are used in the non-theme
-// component styles. Modifying these variables does not have the desired effect for consumers.
-$label-header-height: 24px;
-$label-position-bottom-top-gap: 16px;
-$label-min-width: 50px;
-
-$vertical-stepper-content-margin: 36px;
-
-$side-gap: 24px;
-$line-width: 1px;
-$line-gap: 8px;
-
-$step-sub-label-font-size: 12px;
-$step-header-icon-size: 16px;

package/mat-stepper/src/onemrva-mat-stepper.component.spec.ts

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

package/mat-stepper/src/onemrva-mat-stepper.component.ts

@@ -1,57 +0,0 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkStepper, StepperOrientation } from '@angular/cdk/stepper';
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-
-import { onemrvaMatStepperAnimations } from './onemrva-stepper-animations';
-import { MatStepper } from '@angular/material/stepper';
-
-@Component({
-  selector:
-    'onemrva-mat-stepper, onemrva-mat-vertical-stepper, [onemrvaMatStepper]',
-  exportAs: 'matStepper, matVerticalStepper, matHorizontalStepper',
-  templateUrl: 'onemrva-mat-stepper.html',
-  styleUrls: ['onemrva-mat-stepper.scss'],
-  // eslint-disable-next-line
-  inputs: ['selectedIndex'],
-  animations: [onemrvaMatStepperAnimations.verticalStepTransition],
-  providers: [
-    { provide: MatStepper, useExisting: OnemrvaMatStepperComponent },
-    { provide: CdkStepper, useExisting: MatStepper },
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OnemrvaMatStepperComponent
-  extends MatStepper
-  implements AfterContentInit
-{
-  /** Orientation of the summary-stepper. */
-  @Input()
-  override get orientation(): StepperOrientation {
-    return 'vertical';
-  }
-
-  @HostBinding('class.mat-stepper-vertical') matStepperVertical = true;
-  @HostBinding('attr.aria-orientation') ariaOrientation = 'vertical';
-  @HostBinding('role') role = 'tablist';
-
-  override set orientation(value: StepperOrientation) {}
-
-  constructor(
-    @Optional() dir: Directionality,
-    changeDetectorRef: ChangeDetectorRef,
-    elementRef: ElementRef<HTMLElement>,
-  ) {
-    super(dir, changeDetectorRef, elementRef);
-  }
-}

package/mat-stepper/src/onemrva-mat-stepper.html

@@ -1,61 +0,0 @@
-<!-- Vertical summary-stepper -->
-<ng-container>
-  <div
-    class="mat-step"
-    *ngFor="let step of steps; let i = index; let isLast = last"
-  >
-    <ng-container
-      [ngTemplateOutlet]="stepTemplate"
-      [ngTemplateOutletContext]="{step: step, i: i}"
-    ></ng-container>
-    <div
-      class="mat-vertical-content-container"
-      [class.mat-stepper-vertical-line]="!isLast"
-    >
-      <div
-        class="mat-vertical-stepper-content"
-        role="tabpanel"
-        [@verticalStepTransition]="{
-              'value': _getAnimationDirection(i),
-              'params': {'animationDuration': _getAnimationDuration()}
-            }"
-        (@verticalStepTransition.done)="_animationDone.next($event)"
-        [id]="_getStepContentId(i)"
-        [attr.aria-labelledby]="_getStepLabelId(i)"
-        [attr.aria-expanded]="selectedIndex === i"
-      >
-        <div class="mat-vertical-content">
-          <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-        </div>
-      </div>
-    </div>
-  </div>
-</ng-container>
-
-<!-- Common step templating -->
-<ng-template let-step="step" let-i="i" #stepTemplate>
-  <mat-step-header
-    [class.mat-horizontal-stepper-header]="orientation === 'horizontal'"
-    [class.mat-vertical-stepper-header]="orientation === 'vertical'"
-    (click)="step.select()"
-    (keydown)="_onKeydown($event)"
-    [tabIndex]="_getFocusIndex() === i ? 0 : -1"
-    [id]="_getStepLabelId(i)"
-    [attr.aria-posinset]="i + 1"
-    [attr.aria-setsize]="steps.length"
-    [attr.aria-controls]="_getStepContentId(i)"
-    [attr.aria-selected]="selectedIndex == i"
-    [attr.aria-label]="step.ariaLabel || null"
-    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
-    [attr.aria-disabled]="_stepIsNavigable(i, step) ? null : true"
-    [index]="i"
-    [state]="_getIndicatorType(i, step.state)"
-    [label]="step.stepLabel || step.label"
-    [selected]="selectedIndex === i"
-    [active]="_stepIsNavigable(i, step)"
-    [optional]="step.optional"
-    [errorMessage]="step.errorMessage"
-    [iconOverrides]="_iconOverrides"
-    [disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
-  ></mat-step-header>
-</ng-template>

package/mat-stepper/src/onemrva-mat-stepper.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { OnemrvaMatStepperComponent } from './onemrva-mat-stepper.component';
-import { CommonModule } from '@angular/common';
-import { MatCommonModule, MatRippleModule } from '@angular/material/core';
-import { PortalModule } from '@angular/cdk/portal';
-import { CdkStepperModule } from '@angular/cdk/stepper';
-import { MatIconModule } from '@angular/material/icon';
-import { MatStepperModule } from '@angular/material/stepper';
-
-@NgModule({
-  imports: [
-    MatCommonModule,
-    CommonModule,
-    PortalModule,
-    CdkStepperModule,
-    MatIconModule,
-    MatRippleModule,
-    MatStepperModule,
-  ],
-  exports: [MatCommonModule, MatStepperModule, OnemrvaMatStepperComponent],
-  declarations: [OnemrvaMatStepperComponent],
-  providers: [],
-})
-export class OnemrvaMatStepperModule {}

package/mat-stepper/src/onemrva-stepper-animations.ts

@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-  AnimationTriggerMetadata,
-} from '@angular/animations';
-
-export const DEFAULT_VERTICAL_ANIMATION_DURATION = '225ms';
-
-/**
- * Animations used by the Material steppers.
- * @docs-private
- */
-export const onemrvaMatStepperAnimations: {
-  readonly verticalStepTransition: AnimationTriggerMetadata;
-} = {
-  /** Animation that transitions the step along the Y axis in a vertical summary-stepper. */
-  verticalStepTransition: trigger('verticalStepTransition', [
-    state('previous', style({ height: '*', visibility: 'inherit' })),
-    state('next', style({ height: '0px', visibility: 'hidden' })),
-    // Transition to `inherit`, rather than `visible`,
-    // because visibility on a child element the one from the parent,
-    // making this element focusable inside of a `hidden` element.
-    state('current', style({ height: '*', visibility: 'inherit' })),
-    transition(
-      '* <=> current',
-      animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
-      {
-        params: { animationDuration: DEFAULT_VERTICAL_ANIMATION_DURATION },
-      },
-    ),
-  ]),
-};

package/mat-sticker/index.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of mat-sticker
- */
-
-export * from './src/onemrva-mat-sticker.component';
-export * from './src/onemrva-mat-sticker.module';

package/mat-sticker/ng-package.json

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

package/mat-sticker/src/onemrva-mat-sticker.component.spec.ts

@@ -1,16 +0,0 @@
-import { OnemrvaMatStickerComponent } from './onemrva-mat-sticker.component';
-import { TestBed } from '@angular/core/testing';
-
-describe('OnemrvaMatSticker', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [OnemrvaMatStickerComponent],
-    }).compileComponents();
-  });
-
-  it('should create the component', () => {
-    const fixture = TestBed.createComponent(OnemrvaMatStickerComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeDefined();
-  });
-});

package/mat-sticker/src/onemrva-mat-sticker.component.ts

@@ -1,58 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-
-export type StickerType =
-  | 'info'
-  | 'success'
-  | 'warn'
-  | 'error'
-  | 'accent'
-  | 'primary'
-  | 'grayscale';
-
-@Component({
-  selector: 'onemrva-mat-sticker',
-  template: `<ng-content></ng-content>`,
-})
-export class OnemrvaMatStickerComponent {
-  @Input()
-  color: OnemrvaMatColor = OnemrvaMatColor.PRIMARY;
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-primary')
-  public get _isPrimary(): boolean {
-    return this.color === OnemrvaMatColor.PRIMARY;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-accent')
-  public get _isAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-error')
-  public get _isError(): boolean {
-    return this.color === OnemrvaMatColor.ERROR;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-warn')
-  public get _isWarn(): boolean {
-    return this.color === OnemrvaMatColor.WARN;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-success')
-  public get _isSuccess(): boolean {
-    return this.color === OnemrvaMatColor.SUCCESS;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-info')
-  public get _isInfo(): boolean {
-    return this.color === OnemrvaMatColor.INFO;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-grayscale')
-  public get _isGrayscale(): boolean {
-    return this.color === OnemrvaMatColor.GRAYSCALE;
-  }
-
-  constructor() {}
-}

package/mat-sticker/src/onemrva-mat-sticker.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { OnemrvaMatStickerComponent } from './onemrva-mat-sticker.component';
-
-@NgModule({
-  declarations: [OnemrvaMatStickerComponent],
-  imports: [CommonModule],
-  exports: [OnemrvaMatStickerComponent],
-})
-export class OnemrvaMatStickerModule {}

package/mat-table-of-content/index.ts

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of mat-summary-stepper
- */
-
-export * from './src/onemrva-mat-table-of-content.component';
-export * from './src/onemrva-mat-table-of-content.directive';
-export * from './src/onemrva-mat-table-of-content.service';
-export * from './src/onemrva-mat-toc-anchor.model';

package/mat-table-of-content/ng-package.json

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

package/mat-table-of-content/src/_onemrva-mat-table-of-content.component.scss

@@ -1,79 +0,0 @@
-@use '../../utils' as utils;
-
-@mixin toc($theme) {
-  $bckgr-color: utils.palette($theme, 'grayscale', 50);
-  $left-border-color: utils.palette($theme, 'grayscale', 300);
-  $title-color: utils.palette($theme, 'accent', 600);
-  $anchor-color: utils.palette($theme, 'grayscale', 700);
-  $highlighted-anchor-color: utils.palette($theme, 'grayscale', 900);
-  $color-checkmark: utils.palette($theme, 'success', 600);
-
-  .onemrva-mat-toc {
-    position: fixed;
-    width: 240px;
-    top: 92px;
-    left: 0;
-    bottom: 0;
-    overflow: auto;
-    background-color: $bckgr-color;
-    padding: 56px 8px 8px 32px;
-    box-sizing: border-box;
-
-    .onemrva-mat-toc-title {
-      color: $title-color;
-      line-height: 26px;
-      margin-bottom: 16px;
-    }
-
-    mat-list {
-      padding: 0;
-
-      mat-list-item {
-        padding: 4px 0 4px 8px;
-        height: 32px !important;
-        border-left: 1px solid $left-border-color;
-
-        &.onemrva-mat-hidden-toc-anchor {
-          display: none;
-        }
-
-        .mdc-list-item__primary-text {
-          font-weight: 600;
-          color: $anchor-color;
-        }
-
-        &.active-anchor {
-          border-left: 3px solid $title-color;
-          padding-left: 6px;
-
-          .mdc-list-item__primary-text {
-            color: $highlighted-anchor-color;
-          }
-        }
-
-        &.onemrva-anchor-for-subsection {
-          .mdc-list-item__primary-text {
-            font-weight: 400;
-            padding-left: 16px;
-          }
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        mat-icon {
-          vertical-align: bottom !important;
-
-          &.anchor-check {
-            color: $color-checkmark;
-          }
-
-          &.anchor-warning {
-            color: $title-color;
-          }
-        }
-      }
-    }
-  }
-}

package/mat-table-of-content/src/onemrva-mat-table-of-content.component.html

@@ -1,23 +0,0 @@
-<div class="onemrva-mat-toc">
-  <h3 class="onemrva-mat-toc-title">{{ titleKey | translate }}</h3>
-
-  <mat-list>
-    <mat-list-item
-      *ngFor="let anchor of toc$ | async"
-      (click)="goTo(anchor)"
-      [ngClass]="{
-        'active-anchor': anchor.path === activePath,
-        'onemrva-anchor-for-subsection': anchor.level === level.SUBSECTION,
-        'onemrva-mat-hidden-toc-anchor': anchor.directive.hiddenInToc
-      }"
-    >
-      {{ anchor.titleKey | translate }}
-      <mat-icon *ngIf="anchor.status === status.CHECKMARK" class="anchor-check"
-        >check</mat-icon
-      >
-      <mat-icon *ngIf="anchor.status === status.WARNING" class="anchor-warning"
-        >priority_high</mat-icon
-      >
-    </mat-list-item>
-  </mat-list>
-</div>

package/mat-table-of-content/src/onemrva-mat-table-of-content.component.ts

@@ -1,126 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { MatListModule } from '@angular/material/list';
-import { TranslateModule } from '@ngx-translate/core';
-import { OnemrvaMatTableOfContentService } from './onemrva-mat-table-of-content.service';
-import { Observable, map, tap } from 'rxjs';
-import {
-  OnemrvaMatTocAnchor,
-  OnemrvaMatTocAnchorLevel,
-  OnemrvaMatTocAnchorStatus,
-} from './onemrva-mat-toc-anchor.model';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-
-@Component({
-  selector: 'onemrva-mat-table-of-content',
-  templateUrl: 'onemrva-mat-table-of-content.component.html',
-  standalone: true,
-  imports: [MatListModule, TranslateModule, CommonModule, MatIconModule],
-})
-export class OnemrvaMatTableOfContentComponent implements OnInit, OnDestroy {
-  @Input()
-  titleKey!: string;
-
-  @Input()
-  tocName!: string;
-
-  @HostBinding('attr.data-cy')
-  @Input()
-  dataCy: string = 'onemrva-mat-toc';
-
-  // @HostBinding('attr.aria-label')
-  // @Input()
-  // get ariaLabel() {
-  //   if (!this.titleKey) return null;
-  //   return this.translate.instant(this.titleKey);
-  // }
-
-  @Input()
-  tableOfContentName!: string;
-
-  @Input()
-  scrollShift: number = 0;
-
-  toc$!: Observable<OnemrvaMatTocAnchor[]>;
-
-  activePath: string = '';
-  timerId: any;
-
-  @HostListener('window:scroll', ['$event']) onScrollEvent($event: any) {
-    this.throttledUpdateActivePath($event);
-  }
-
-  @HostListener('window:resize', ['$event']) onResizeEvent($event: any) {
-    this.throttledUpdateActivePath($event);
-  }
-
-  level = OnemrvaMatTocAnchorLevel;
-  status = OnemrvaMatTocAnchorStatus;
-
-  constructor(private tocService: OnemrvaMatTableOfContentService) {}
-
-  ngOnInit(): void {
-    this.toc$ = this.tocService.toc$.pipe(
-      map(tocMap => tocMap[this.tocName].filter(entry => !entry.hidden)),
-      tap(toc => {
-        if (!toc) this.titleKey = 'tocName.notFound';
-        else this.activePath = toc[0].path;
-      }),
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.tocService.resetToc();
-  }
-
-  goTo(anchor: OnemrvaMatTocAnchor) {
-    const e = document.querySelector("[href='" + anchor.path + "']")!;
-    const y = e.getBoundingClientRect().y;
-
-    window.scroll({
-      top: window.scrollY + y - this.scrollShift,
-      behavior: 'smooth',
-    });
-
-    // this.activePath = anchor.path;
-  }
-
-  throttledUpdateActivePath(_$event: any) {
-    if (this.timerId) return;
-
-    this.timerId = setTimeout(() => {
-      this.updateActivePath();
-      this.timerId = undefined;
-    }, 200);
-  }
-
-  updateActivePath() {
-    let prevElement: { href: string; top: number } = { href: '', top: 0 };
-
-    const anchors = document.querySelectorAll('.onemrva-mat-toc-anchor');
-    for (let i = 0; i < anchors.length; i++) {
-      const anchor = anchors[i];
-      const top = anchor.getBoundingClientRect().top - this.scrollShift;
-      const href: string = anchor.getAttribute('href')!;
-
-      if (top >= 0) {
-        if (prevElement.top < 0) {
-          this.activePath =
-            (top + prevElement.top) / 2 > 0 ? prevElement.href : href;
-        } else {
-          this.activePath = anchor.getAttribute('href')!;
-        }
-        return;
-      } else {
-        prevElement = { top, href };
-      }
-    }
-  }
-}