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

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

@@ -1,21 +0,0 @@
-<ng-template #defaultTemplate>
-  <ng-content></ng-content>
-</ng-template>
-
-<ng-template #imageTemplate>
-  <div
-    #image
-    class="onemrva-avatar__image"
-    [style.backgroundImage]="getSrcUrl()"
-  ></div>
-</ng-template>
-
-<ng-template #initialsTemplate>
-  <span>{{ initials | slice: 0 : 2 }}</span>
-</ng-template>
-
-<ng-template #iconTemplate>
-  <mat-icon>{{ icon }}</mat-icon>
-</ng-template>
-
-<ng-container *ngTemplateOutlet="template"></ng-container>

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

@@ -1,421 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  OnInit,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import {
-  mkenum,
-  OnemrvaMatSize,
-  OnemrvaMatColor,
-} from '@onemrvapublic/design-system/utils';
-
-let NEXT_ID = 0;
-
-export const MatAvatarType = mkenum({
-  INITIALS: 'initials',
-  IMAGE: 'image',
-  ICON: 'icon',
-  CUSTOM: 'custom',
-});
-export type MatAvatarType = (typeof MatAvatarType)[keyof typeof MatAvatarType];
-
-/**
- * Avatar provides a way to display an image, icon or initials to the user.
- *
- * @MatModule OnemrvaMatAvatarModule
- *
- * @MatTheme onemrva-mat-avatar-theme, onemrva-mat-icon-theme
- *
- * @MatKeywords avatar, profile, picture, initials
- *
- * @MatGroup Layouts
- *
- * @remarks
- *
- * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an
- * image, someone's initials or a material icon from the Google Material icon set.
- *
- * @example
- * ```html
- * <onemrva-mat-avatar initials="MS" [roundShape]="true" size="large">
- * </onemrva-mat-avatar>
- * ```
- */
-@Component({
-  selector: 'onemrva-mat-avatar',
-  templateUrl: 'onemrva-mat-avatar.component.html',
-})
-export class OnemrvaMatAvatarComponent implements OnInit {
-  /**
-   * Returns the `aria-label` attribute of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let ariaLabel = this.avatar.ariaLabel;
-   * ```
-   *
-   */
-  @HostBinding('attr.aria-label')
-  public ariaLabel = 'avatar';
-
-  /**
-   * Returns the `role` attribute of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let avatarRole = this.avatar.role;
-   * ```
-   */
-  @HostBinding('attr.role')
-  public role = 'img';
-
-  /**
-   * Host `class.onemrva-mat-avatar` binding.
-   *
-   * @hidden
-   * @internal
-   */
-  @HostBinding('class.onemrva-mat-avatar')
-  public cssClass = 'onemrva-mat-avatar';
-
-  /**
-   * Returns the type of the avatar.
-   * The avatar can be:
-   * - `"initials type avatar"`
-   * - `"icon type avatar"`
-   * - `"image type avatar"`.
-   * - `"custom type avatar"`.
-   *
-   * @example
-   * ```typescript
-   * let avatarDescription = this.avatar.roleDescription;
-   * ```
-   */
-  @HostBinding('attr.aria-roledescription')
-  public roleDescription: string = '';
-
-  /**
-   * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"onemrva-mat-avatar-0"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar id="my-first-avatar"></onemrva-mat-avatar>
-   * ```
-   */
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-mat-avatar-${NEXT_ID++}`;
-
-  /**
-   * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
-   * By default the shape of the avatar is a square.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar [roundShape]="true" ></onemrva-mat-avatar>
-   * ```
-   */
-
-  @HostBinding('class.onemrva-mat-avatar--rounded')
-  @Input()
-  public roundShape = true;
-
-  /**
-   * Sets initials to the avatar.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar initials="MN"></onemrva-mat-avatar>
-   * ```
-   */
-  @Input()
-  public initials: string = '';
-
-  /**
-   * Sets an icon to the avatar. All icons from the material icon set are supported.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar icon="phone"></onemrva-mat-avatar>
-   * ```
-   */
-  @Input()
-  public icon: string = '';
-
-  /**
-   * Sets the image source of the avatar.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar src="images/picture.jpg"></onemrva-mat-avatar>
-   * ```
-   * @MatFriendlyName Image URL
-   */
-  @Input()
-  public src: string = '';
-
-  /** @hidden @internal */
-  @ViewChild('defaultTemplate', { read: TemplateRef, static: true })
-  protected defaultTemplate: TemplateRef<any> | null = null;
-
-  /** @hidden @internal */
-  @ViewChild('imageTemplate', { read: TemplateRef, static: true })
-  protected imageTemplate: TemplateRef<any> | null = null;
-
-  /** @hidden @internal */
-  @ViewChild('initialsTemplate', { read: TemplateRef, static: true })
-  protected initialsTemplate: TemplateRef<any> | null = null;
-
-  /** @hidden @internal */
-  @ViewChild('iconTemplate', { read: TemplateRef, static: true })
-  protected iconTemplate: TemplateRef<any> | null = null;
-
-  /**
-   * @hidden
-   * @internal
-   */
-  private _size: OnemrvaMatSize = OnemrvaMatSize.SMALL;
-
-  /**
-   * Returns the size of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let avatarSize = this.avatar.size;
-   * ```
-   */
-  @Input()
-  public get size(): OnemrvaMatSize {
-    return this._size;
-  }
-
-  /**
-   * Sets the size  of the avatar.
-   * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar size="large"></onemrva-mat-avatar>
-   * ```
-   */
-  public set size(value: string | OnemrvaMatSize) {
-    switch (value) {
-      case OnemrvaMatSize.XSMALL:
-      case OnemrvaMatSize.SMALL:
-      case OnemrvaMatSize.MEDIUM:
-      case OnemrvaMatSize.LARGE:
-      case OnemrvaMatSize.XLARGE:
-        this._size = value;
-        break;
-      default:
-        this._size = OnemrvaMatSize.MEDIUM;
-    }
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--extrasmall')
-  public get _isXSmallSize(): boolean {
-    return this.size === OnemrvaMatSize.XSMALL;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--small')
-  public get _isSmallSize(): boolean {
-    return this.size === OnemrvaMatSize.SMALL;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--medium')
-  public get _isMediumSize(): boolean {
-    return this.size === OnemrvaMatSize.MEDIUM;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--large')
-  public get _isLargeSize(): boolean {
-    return this.size === OnemrvaMatSize.LARGE;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--extralarge')
-  public get _isXLargeSize(): boolean {
-    return this.size === OnemrvaMatSize.XLARGE;
-  }
-
-  /**
-   * @hidden
-   * @internal
-   */
-  private _color: OnemrvaMatColor = OnemrvaMatColor.ACCENT;
-
-  /** @hidden @internal */
-  @HostBinding('mat-accent')
-  public get _colorAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-
-  /**
-   * Returns the size of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let avatarSize = this.avatar.size;
-   * ```
-   */
-  @Input()
-  public get color(): OnemrvaMatColor {
-    return this._color;
-  }
-
-  /**
-   * Sets the size  of the avatar.
-   * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-avatar size="large"></onemrva-mat-avatar>
-   * ```
-   */
-  public set color(value: OnemrvaMatColor) {
-    switch (value) {
-      case OnemrvaMatColor.NONE:
-      case OnemrvaMatColor.ACCENT:
-      case OnemrvaMatColor.PRIMARY:
-      case OnemrvaMatColor.SUCCESS:
-      case OnemrvaMatColor.WARN:
-      case OnemrvaMatColor.INFO:
-      case OnemrvaMatColor.ERROR:
-      case OnemrvaMatColor.GRAYSCALE:
-        this._color = value;
-        break;
-      default:
-        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;
-  }
-
-  /**
-   * Returns the type of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let avatarType = this.avatar.type;
-   * ```
-   */
-  public get type(): MatAvatarType {
-    if (this.src) {
-      return MatAvatarType.IMAGE;
-    }
-
-    if (this.icon) {
-      return MatAvatarType.ICON;
-    }
-
-    if (this.initials) {
-      return MatAvatarType.INITIALS;
-    }
-
-    return MatAvatarType.CUSTOM;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--image')
-  public get _isImageType(): boolean {
-    return this.type === MatAvatarType.IMAGE;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--icon')
-  public get _isIconType(): boolean {
-    return this.type === MatAvatarType.ICON;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.onemrva-mat-avatar--initials')
-  public get _isInitialsType(): boolean {
-    return this.type === MatAvatarType.INITIALS;
-  }
-
-  /**
-   * Returns the template of the avatar.
-   *
-   * @hidden
-   * @internal
-   */
-  public get template(): TemplateRef<any> | null {
-    switch (this.type) {
-      case MatAvatarType.IMAGE:
-        return this.imageTemplate;
-      case MatAvatarType.INITIALS:
-        return this.initialsTemplate;
-      case MatAvatarType.ICON:
-        return this.iconTemplate;
-      default:
-        return this.defaultTemplate;
-    }
-  }
-
-  constructor(public elementRef: ElementRef) {}
-
-  /**
-   * Returns the css url of the image.
-   *
-   * @hidden
-   * @internal
-   */
-  public getSrcUrl() {
-    return `url(${this.src})`;
-  }
-
-  /** @hidden @internal */
-  public ngOnInit() {
-    this.roleDescription = this.getRole();
-  }
-
-  /** @hidden @internal */
-  private getRole(): string {
-    switch (this.type) {
-      case MatAvatarType.IMAGE:
-        return 'image avatar';
-      case MatAvatarType.ICON:
-        return 'icon avatar';
-      case MatAvatarType.INITIALS:
-        return 'initials avatar';
-      default:
-        return 'custom avatar';
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { OnemrvaMatAvatarComponent } from './onemrva-mat-avatar.component';
-
-@NgModule({
-  declarations: [OnemrvaMatAvatarComponent],
-  imports: [CommonModule, MatIconModule],
-  exports: [OnemrvaMatAvatarComponent],
-})
-export class OnemrvaMatAvatarModule {}

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

@@ -1,54 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { MatTabsModule } from '@angular/material/tabs';
-import { OnemrvaMatAvatarComponent } from '@onemrvapublic/design-system/mat-avatar';
-
-describe('onemrva-mat-avatar', () => {
-  let component: OnemrvaMatAvatarComponent;
-  let fixture: ComponentFixture<OnemrvaMatAvatarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        TranslateModule.forRoot(),
-        MatSidenavModule,
-        NoopAnimationsModule,
-        MatTabsModule,
-        RouterModule.forRoot([
-          { path: '', pathMatch: 'full', redirectTo: 'test' },
-        ]),
-      ],
-      declarations: [OnemrvaMatAvatarComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OnemrvaMatAvatarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('initials', () => {
-    it('should have the initials', () => {
-      const FIXED_INITIALS = 'ro';
-      component.initials = FIXED_INITIALS;
-      fixture.detectChanges();
-      expect(fixture.nativeElement.textContent).toEqual(FIXED_INITIALS);
-    });
-
-    it('should limit the initials to a length of 2', () => {
-      component.initials = 'longer word';
-      fixture.detectChanges();
-      expect(fixture.nativeElement.textContent.length).toBe(2);
-    });
-  });
-});

package/mat-badge/index.ts

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

package/mat-badge/ng-package.json

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

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

@@ -1,157 +0,0 @@
-@use '../../utils';
-
-@mixin badge($theme) {
-  .mat-badge {
-    &.mat-badge-accent {
-      .mat-badge-content {
-        background-color: utils.gradient($theme);
-      }
-    }
-    &.mat-badge-info {
-      .mat-badge-content {
-        background-color: utils.palette($theme, 'info');
-      }
-    }
-    &.mat-badge-success {
-      .mat-badge-content {
-        background-color: utils.palette($theme, 'success');
-      }
-    }
-    &.mat-badge-error {
-      .mat-badge-content {
-        background-color: utils.palette($theme, 'error');
-      }
-    }
-    &.mat-badge-grayscale {
-      .mat-badge-content {
-        background-color: utils.palette($theme, 'grayscale');
-      }
-    }
-    .mat-badge-content {
-      border: 2px solid white;
-    }
-  }
-  onemrva-mat-avatar + .mat-badge-content {
-  }
-  .mat-badge-icon {
-    .mat-badge-content {
-      //noinspection CssNoGenericFontName
-      font-family: 'Material Icons';
-      font-weight: 300;
-      font-variation-settings:
-        'FILL' 0,
-        'wght' 300,
-        'GRAD' 0,
-        'opsz' 48;
-    }
-  }
-
-  .mat-badge-content {
-    font-family: utils.fontFamily($theme, 'headline-1');
-    font-weight: 300;
-  }
-  .mat-badge-small {
-    width: 15px;
-    height: 15px;
-    &.mat-badge-icon {
-      .mat-badge-content {
-        font-size: 12px;
-      }
-    }
-    .mat-badge-content {
-      font-size: 7px;
-      min-width: 15px;
-      width: 15px;
-      height: 15px;
-      line-height: 15px;
-    }
-    &.mat-badge-before {
-      onemrva-mat-avatar + .mat-badge-content {
-        left: 12px;
-      }
-    }
-    &.mat-badge-after {
-      onemrva-mat-avatar + .mat-badge-content {
-        right: 12px;
-      }
-    }
-    &.mat-badge-above {
-      onemrva-mat-avatar + .mat-badge-content {
-        top: -14px;
-      }
-    }
-    &.mat-badge-below {
-      onemrva-mat-avatar + .mat-badge-content {
-        bottom: -22px;
-      }
-    }
-  }
-  .mat-badge-medium {
-    width: 20px;
-    height: 20px;
-    &.mat-badge-icon {
-      .mat-badge-content {
-        font-size: 16px;
-      }
-    }
-    .mat-badge-content {
-      font-size: 10px;
-      min-width: 20px;
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-    }
-    &.mat-badge-before {
-      onemrva-mat-avatar + .mat-badge-content {
-        left: 12px;
-      }
-    }
-    &.mat-badge-after {
-      onemrva-mat-avatar + .mat-badge-content {
-        right: 12px;
-      }
-    }
-    &.mat-badge-above {
-      onemrva-mat-avatar + .mat-badge-content {
-        top: -26px;
-      }
-    }
-    &.mat-badge-below {
-      onemrva-mat-avatar + .mat-badge-content {
-        bottom: -30px;
-      }
-    }
-  }
-  .mat-badge-large {
-    min-width: 30px;
-    height: 30px;
-    .mat-badge-content {
-      font-size: 14px !important;
-    }
-    &.mat-badge-icon {
-      .mat-badge-content {
-        font-size: 22px;
-      }
-    }
-    &.mat-badge-before {
-      onemrva-mat-avatar + .mat-badge-content {
-        left: 20px;
-      }
-    }
-    &.mat-badge-after {
-      onemrva-mat-avatar + .mat-badge-content {
-        right: 20px;
-      }
-    }
-    &.mat-badge-above {
-      onemrva-mat-avatar + .mat-badge-content {
-        top: -50px;
-      }
-    }
-    &.mat-badge-below {
-      onemrva-mat-avatar + .mat-badge-content {
-        bottom: -50px;
-      }
-    }
-  }
-}