@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.ts

@@ -0,0 +1,421 @@
+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/projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.module.ts

@@ -0,0 +1,17 @@
+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/projects/onemrva/design-system/mat-badge/index.ts

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

package/projects/onemrva/design-system/mat-badge/ng-package.json

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

package/projects/onemrva/design-system/mat-badge/src/onemrva-mat-badge.component.scss

@@ -0,0 +1,152 @@
+@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 {
+            font-family: 'Material Icons';
+            font-weight: 300;
+            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
+        }
+    }
+
+    .mat-badge-content {
+        font-family: 'Poppins', sans-serif;
+        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;
+            }
+        }
+    }
+}