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

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

@@ -1,331 +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 { AriaDescriber } from '@angular/cdk/a11y';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import {
-  Directive,
-  ElementRef,
-  HostBinding,
-  Inject,
-  Input,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Renderer2,
-} from '@angular/core';
-import { CanDisable, mixinDisabled } from '@angular/material/core';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
-
-let nextId = 0;
-
-// Boilerplate for applying mixins to MatBadge.
-/** @docs-private */
-const _MatBadgeBase = mixinDisabled(class {});
-
-/** Possible color palette values. */
-export declare type ThemePalette =
-  | 'primary'
-  | 'accent'
-  | 'warn'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'grayscale'
-  | undefined;
-
-/** Allowed position options for matBadgePosition */
-export type MatBadgePosition =
-  | 'above after'
-  | 'above before'
-  | 'below before'
-  | 'below after'
-  | 'before'
-  | 'after'
-  | 'above'
-  | 'below';
-
-/** Allowed size options for matBadgeSize */
-export type MatBadgeSize = 'small' | 'medium' | 'large';
-
-const BADGE_CONTENT_CLASS = 'mat-badge-content';
-
-/** Directive to display a text badge. */
-@Directive({
-  selector: '[matBadge]',
-  // eslint-disable-next-line
-  inputs: ['disabled: matBadgeDisabled'],
-  // eslint-disable-next-line
-  host: {
-    class: 'mat-badge',
-    '[class.mat-badge-overlap]': 'overlap',
-    '[class.mat-badge-above]': 'isAbove()',
-    '[class.mat-badge-below]': '!isAbove()',
-    '[class.mat-badge-before]': '!isAfter()',
-    '[class.mat-badge-after]': 'isAfter()',
-    '[class.mat-badge-small]': 'size === "small"',
-    '[class.mat-badge-medium]': 'size === "medium"',
-    '[class.mat-badge-large]': 'size === "large"',
-    '[class.mat-badge-hidden]': 'hidden || !content',
-    '[class.mat-badge-disabled]': 'disabled',
-  },
-})
-export class OnemrvaMatBadgeDirective
-  extends _MatBadgeBase
-  implements OnInit, OnDestroy, CanDisable
-{
-  /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
-  @Input('matBadgeColor')
-  get color(): ThemePalette {
-    return this._color;
-  }
-
-  set color(value: ThemePalette) {
-    this._setColor(value);
-    this._color = value;
-  }
-
-  private _color: ThemePalette = 'primary';
-
-  /** Whether the badge should overlap its contents or not */
-  @Input('matBadgeOverlap')
-  get overlap(): boolean {
-    return this._overlap;
-  }
-
-  set overlap(val: BooleanInput) {
-    this._overlap = coerceBooleanProperty(val);
-  }
-
-  private _overlap: boolean = true;
-
-  /**
-   * Position the badge should reside.
-   * Accepts any combination of 'above'|'below' and 'before'|'after'
-   */
-  @Input('matBadgePosition') position: MatBadgePosition = 'above after';
-
-  /** The content for the badge */
-  @Input('matBadge')
-  get content(): string | number | undefined | null {
-    return this._content;
-  }
-
-  set content(newContent: string | number | undefined | null) {
-    this._updateRenderedContent(newContent);
-  }
-
-  private _content: string | number | undefined | null;
-
-  /** Message used to describe the decorated element via aria-describedby */
-  @Input('matBadgeDescription')
-  get description(): string {
-    return this._description;
-  }
-
-  set description(newDescription: string) {
-    this._updateHostAriaDescription(newDescription);
-  }
-
-  private _description: string = '';
-
-  /** Size of the badge. Can be 'small', 'medium', or 'large'. */
-  @Input('matBadgeSize') size: MatBadgeSize = 'medium';
-
-  /** Whether the badge is hidden. */
-  @Input('matBadgeHidden')
-  get hidden(): boolean {
-    return this._hidden;
-  }
-
-  set hidden(val: BooleanInput) {
-    this._hidden = coerceBooleanProperty(val);
-  }
-
-  private _hidden: boolean = false;
-
-  @HostBinding('class.mat-badge-icon')
-  isIcon: boolean = false;
-
-  /** Unique id for the badge */
-  _id: number = nextId++;
-
-  /** Visible badge element. */
-  private _badgeElement: HTMLElement | undefined;
-
-  /** Whether the OnInit lifecycle hook has run yet */
-  private _isInitialized = false;
-
-  constructor(
-    private _ngZone: NgZone,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _ariaDescriber: AriaDescriber,
-    private _renderer: Renderer2,
-    @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
-  ) {
-    super();
-
-    // if (typeof ngDevMode === 'undefined' || ngDevMode) {
-    //   const nativeElement = _elementRef.nativeElement;
-    //   if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
-    //     throw Error('matBadge must be attached to an element node.');
-    //   }
-    // }
-  }
-
-  /** Whether the badge is above the host or not */
-  isAbove(): boolean {
-    return this.position.indexOf('below') === -1;
-  }
-
-  /** Whether the badge is after the host or not */
-  isAfter(): boolean {
-    return this.position.indexOf('before') === -1;
-  }
-
-  /**
-   * Gets the element into which the badge's content is being rendered. Undefined if the element
-   * hasn't been created (e.g. if the badge doesn't have content).
-   */
-  getBadgeElement(): HTMLElement | undefined {
-    return this._badgeElement;
-  }
-
-  ngOnInit() {
-    // We may have server-side rendered badge that we need to clear.
-    // We need to do this in ngOnInit because the full content of the component
-    // on which the badge is attached won't necessarily be in the DOM until this point.
-    this._clearExistingBadges();
-
-    if (this.content && !this._badgeElement) {
-      this._badgeElement = this._createBadgeElement();
-      this._updateRenderedContent(this.content);
-    }
-
-    this._isInitialized = true;
-  }
-
-  ngOnDestroy() {
-    // ViewEngine only: when creating a badge through the Renderer, Angular remembers its index.
-    // We have to destroy it ourselves, otherwise it'll be retained in memory.
-    if (this._renderer.destroyNode) {
-      this._renderer.destroyNode(this._badgeElement);
-    }
-
-    this._ariaDescriber.removeDescription(
-      this._elementRef.nativeElement,
-      this.description,
-    );
-  }
-
-  /** Creates the badge element */
-  private _createBadgeElement(): HTMLElement {
-    const badgeElement = this._renderer.createElement('span');
-    const activeClass = 'mat-badge-active';
-
-    badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
-
-    // The badge is aria-hidden because we don't want it to appear in the page's navigation
-    // flow. Instead, we use the badge to describe the decorated element with aria-describedby.
-    badgeElement.setAttribute('aria-hidden', 'true');
-    badgeElement.classList.add(BADGE_CONTENT_CLASS);
-
-    if (this._animationMode === 'NoopAnimations') {
-      badgeElement.classList.add('_mat-animation-noopable');
-    }
-
-    this._elementRef.nativeElement.appendChild(badgeElement);
-
-    // animate in after insertion
-    if (
-      typeof requestAnimationFrame === 'function' &&
-      this._animationMode !== 'NoopAnimations'
-    ) {
-      this._ngZone.runOutsideAngular(() => {
-        requestAnimationFrame(() => {
-          badgeElement.classList.add(activeClass);
-        });
-      });
-    } else {
-      badgeElement.classList.add(activeClass);
-    }
-
-    return badgeElement;
-  }
-
-  /** Update the text content of the badge element in the DOM, creating the element if necessary. */
-  private _updateRenderedContent(
-    newContent: string | number | undefined | null,
-  ): void {
-    let newContentNormalized: string = `${newContent ?? ''}`.trim();
-    //const newContentNormalized: string = '\uf063';
-    if (typeof newContent === 'string' && newContent.substring(0, 2) == '\\u') {
-      this.isIcon = true;
-      newContentNormalized = String.fromCodePoint(
-        parseInt(newContent.substring(2, newContent.length), 16),
-      );
-    } else if (typeof newContent === 'number' || !isNaN(Number(newContent))) {
-      if (typeof newContent === 'string') newContent = parseInt(newContent);
-      else if (newContent === null || newContent === undefined) newContent = 0;
-      if (newContent >= 100) {
-        newContentNormalized = '99+';
-      }
-    }
-    // Don't create the badge element if the directive isn't initialized because we want to
-    // append the badge element to the *end* of the host element's content for backwards
-    // compatibility.
-    if (this._isInitialized && newContentNormalized && !this._badgeElement) {
-      this._badgeElement = this._createBadgeElement();
-    }
-
-    if (this._badgeElement) {
-      this._badgeElement.textContent = newContentNormalized;
-    }
-
-    this._content = newContentNormalized;
-  }
-
-  /** Updates the host element's aria description via AriaDescriber. */
-  private _updateHostAriaDescription(newDescription: string): void {
-    this._ariaDescriber.removeDescription(
-      this._elementRef.nativeElement,
-      this.description,
-    );
-    if (newDescription) {
-      this._ariaDescriber.describe(
-        this._elementRef.nativeElement,
-        newDescription,
-      );
-    }
-    this._description = newDescription;
-  }
-
-  /** Adds css theme class given the color to the component host */
-  private _setColor(colorPalette: ThemePalette) {
-    const classList = this._elementRef.nativeElement.classList;
-    classList.remove(`mat-badge-${this._color}`);
-    if (colorPalette) {
-      classList.add(`mat-badge-${colorPalette}`);
-    }
-  }
-
-  /** Clears any existing badges that might be left over from server-side rendering. */
-  private _clearExistingBadges() {
-    // Only check direct children of this host element in order to avoid deleting
-    // any badges that might exist in descendant elements.
-    const badges = this._elementRef.nativeElement.querySelectorAll(
-      `:scope > .${BADGE_CONTENT_CLASS}`,
-    );
-    for (const badgeElement of Array.from(badges)) {
-      if (badgeElement !== this._badgeElement) {
-        badgeElement.remove();
-      }
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { OnemrvaMatBadgeDirective } from './onemrva-mat-badge.component';
-
-@NgModule({
-  declarations: [OnemrvaMatBadgeDirective],
-  exports: [OnemrvaMatBadgeDirective],
-})
-export class OnemrvaMatBadgeModule {}

package/mat-breadcrumb/index.ts

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

package/mat-breadcrumb/ng-package.json

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

package/mat-breadcrumb/src/onemrva-mat-breadcrumb.component.html

@@ -1,37 +0,0 @@
-<ng-container *ngIf="breadcrumbs$ | async as bc">
-  <ul class="onemrva-mat-breadcrumb" *ngIf="bc.length > 0">
-    <li
-      *ngFor="let breadcrumb of bc; let i = index"
-      class="onemrva-mat-breadcrumb-link-container"
-      [ngStyle]="{ display: bc.length <= 6 || i <= 2 ? 'list-item' : 'none' }"
-    >
-      <div [routerLink]="breadcrumb.url" class="onemrva-mat-breadcrumb-link">
-        {{ breadcrumb.label }}
-      </div>
-
-      <mat-icon
-        *ngIf="i < bc.length - 1"
-        class="chevron-right"
-        style="width: 10px"
-        >chevron_right</mat-icon
-      >
-    </li>
-    <li
-      *ngIf="bc.length > 6"
-      class="onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden"
-    >
-      ...
-      <mat-icon class="chevron-right" style="width: 10px"
-        >chevron_right</mat-icon
-      >
-    </li>
-    <li *ngIf="bc.length > 6" class="onemrva-mat-breadcrumb-link-container">
-      <div
-        [routerLink]="bc[bc.length - 1].url"
-        class="onemrva-mat-breadcrumb-link"
-      >
-        {{ bc[bc.length - 1].label }}
-      </div>
-    </li>
-  </ul>
-</ng-container>

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

@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';
-import { OnemrvaMatBreadcrumbService } from './onemrva-mat-breadcrumb.service';
-
-@Component({
-  selector: 'onemrva-mat-breadcrumb',
-  templateUrl: 'onemrva-mat-breadcrumb.component.html',
-})
-export class OnemrvaMatBreadcrumbComponent {
-  breadcrumbs$!: Observable<OnemrvaBreadcrumb[]>;
-
-  constructor(private readonly breadcrumbService: OnemrvaMatBreadcrumbService) {
-    this.breadcrumbs$ = breadcrumbService.breadcrumbs$;
-  }
-}

package/mat-breadcrumb/src/onemrva-mat-breadcrumb.model.ts

@@ -1,4 +0,0 @@
-export interface OnemrvaBreadcrumb {
-  label: string;
-  url: string;
-}

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

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { RouterModule } from '@angular/router';
-import { OnemrvaMatBreadcrumbComponent } from './onemrva-mat-breadcrumb.component';
-
-@NgModule({
-  declarations: [OnemrvaMatBreadcrumbComponent],
-  imports: [CommonModule, MatIconModule, RouterModule],
-  exports: [OnemrvaMatBreadcrumbComponent],
-})
-export class OnemrvaMatBreadcrumbModule {}

package/mat-breadcrumb/src/onemrva-mat-breadcrumb.service.ts

@@ -1,65 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class OnemrvaMatBreadcrumbService {
-  // Subject emitting the breadcrumb hierarchy
-  private readonly _breadcrumbs$ = new BehaviorSubject<OnemrvaBreadcrumb[]>([]);
-
-  // Observable exposing the breadcrumb hierarchy
-  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
-
-  constructor(private router: Router) {
-    this.router.events
-      .pipe(
-        // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
-        filter(event => event instanceof NavigationEnd),
-      )
-      .subscribe(() => {
-        // Construct the breadcrumb hierarchy
-        const root = this.router.routerState.snapshot.root;
-        const breadcrumbs: OnemrvaBreadcrumb[] = [];
-        this.addBreadcrumb(root, [], breadcrumbs);
-
-        // Emit the new hierarchy
-        this._breadcrumbs$.next(breadcrumbs);
-      });
-  }
-
-  private addBreadcrumb(
-    route: ActivatedRouteSnapshot | null,
-    parentUrl: string[],
-    breadcrumbs: OnemrvaBreadcrumb[],
-  ) {
-    if (route) {
-      // Construct the route URL
-      const routeUrl = parentUrl.concat(route.url.map(url => url.path));
-
-      // Add an element for the current route part
-      if (route.data['navigationTitle']) {
-        const url = '/' + routeUrl.join('/');
-        const breadcrumb = {
-          label: route.data['navigationTitle'],
-          url,
-        };
-
-        if (
-          breadcrumbs.length > 0 &&
-          url === breadcrumbs[breadcrumbs.length - 1].url
-        ) {
-          breadcrumbs[breadcrumbs.length - 1] = breadcrumb;
-        } else {
-          breadcrumbs.push(breadcrumb);
-        }
-      }
-
-      // Add another element for the next route part
-      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
-    }
-  }
-}

package/mat-carousel/index.ts

@@ -1,2 +0,0 @@
-export * from './src/onemrva-mat-carousel.component';
-export * from './src/mat-carousel-item/onemrva-mat-carousel-item.component';

package/mat-carousel/ng-package.json

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

package/mat-carousel/src/mat-carousel-item/onemrva-mat-carousel-item.component.html

@@ -1,5 +0,0 @@
-<!--<ng-template>-->
-<!--    <ng-content></ng-content>-->
-<!--</ng-template>-->
-
-<ng-content></ng-content>

package/mat-carousel/src/mat-carousel-item/onemrva-mat-carousel-item.component.ts

@@ -1,27 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  HostBinding,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'onemrva-mat-carousel-item',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './onemrva-mat-carousel-item.component.html',
-})
-export class OnemrvaMatCarouselItemComponent {
-  @ViewChild(TemplateRef) tpl!: TemplateRef<any>;
-
-  public nativeElement: HTMLElement;
-
-  constructor(private element: ElementRef) {
-    this.nativeElement = element.nativeElement;
-  }
-
-  @HostBinding('class.show')
-  public show: boolean = false;
-}

package/mat-carousel/src/onemrva-mat-carousel-item.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: '[carouselItem]',
-})
-export class CarouselItemDirective {
-  constructor(public tpl: TemplateRef<any>) {}
-}

package/mat-carousel/src/onemrva-mat-carousel.component.html

@@ -1,43 +0,0 @@
-<button
-  *ngIf="hasPrev()"
-  [@inOutAnimation]
-  (click)="prev()"
-  mat-icon-button
-  color="primary"
-  [attr.aria-label]="'carousel.previous' | translate"
-  class="controls previous"
->
-  <mat-icon class="large">chevron_left</mat-icon>
-</button>
-<button
-  *ngIf="hasNext()"
-  [@inOutAnimation]
-  (click)="next()"
-  mat-icon-button
-  color="primary"
-  [attr.aria-label]="'carousel.next' | translate"
-  class="controls next"
->
-  <mat-icon class="large">chevron_right</mat-icon>
-</button>
-
-<section
-  class="carousel-wrapper"
-  [ngStyle]="carouselWrapperStyle"
-  #carouselWrapper
->
-  <ng-content></ng-content>
-</section>
-
-<div class="dots">
-  <span
-    class="dot"
-    role="button"
-    [attr.aria-label]="
-      ('carousel.goto' | translate) + ' ' + (i + 1) + '/' + items.length
-    "
-    [class.active]="i == currentSlide"
-    *ngFor="let item of items; index as i"
-    (click)="goto(i)"
-  ></span>
-</div>