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

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

@@ -0,0 +1,84 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+
+declare enum OnemrvaMatTocAnchorStatus {
+    CHECKMARK = 0,
+    WARNING = 1
+}
+declare enum OnemrvaMatTocAnchorLevel {
+    SECTION = 0,
+    SUBSECTION = 1
+}
+interface OnemrvaMatTocAnchor {
+    tocName: string;
+    titleKey: string;
+    path: string;
+    order?: number;
+    status?: OnemrvaMatTocAnchorStatus;
+    level?: OnemrvaMatTocAnchorLevel;
+    hidden?: boolean;
+    directive?: any;
+}
+type OnemrvaMatToc = Record<string, OnemrvaMatTocAnchor[]>;
+
+declare class OnemrvaMatTableOfContentService {
+    private _toc;
+    private _toc$;
+    toc$: Observable<OnemrvaMatToc>;
+    addAnchor(anchor: OnemrvaMatTocAnchor): void;
+    resetToc(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTableOfContentService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<OnemrvaMatTableOfContentService>;
+}
+
+declare class OnemrvaMatTableOfContentComponent implements OnInit, OnDestroy, AfterViewInit {
+    titleKey: string;
+    tocName: string;
+    dataCy: string;
+    tableOfContentName: string;
+    scrollShift: number;
+    toc$: Observable<OnemrvaMatTocAnchor[]>;
+    activePath: string;
+    destroy$: Subject<boolean>;
+    level: typeof OnemrvaMatTocAnchorLevel;
+    status: typeof OnemrvaMatTocAnchorStatus;
+    location: Location;
+    route: ActivatedRoute;
+    router: Router;
+    tocService: OnemrvaMatTableOfContentService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private observer;
+    private timeoutId;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTableOfContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTableOfContentComponent, "onemrva-mat-table-of-content", never, { "titleKey": { "alias": "titleKey"; "required": false; }; "tocName": { "alias": "tocName"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "tableOfContentName": { "alias": "tableOfContentName"; "required": false; }; "scrollShift": { "alias": "scrollShift"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * For accessibility purpose, aria-label and will be displayed
+ */
+declare class OnemrvaMatTableOfContentDirective implements OnInit, AfterViewInit {
+    onemrvaMatToc: OnemrvaMatTocAnchor;
+    role: string;
+    clazz: string;
+    id: string;
+    get ariaLabel(): any;
+    hiddenInToc: boolean;
+    get ariaToc(): string;
+    tocService: OnemrvaMatTableOfContentService;
+    cd: ChangeDetectorRef;
+    translateService: TranslateService;
+    route: ActivatedRoute;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTableOfContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OnemrvaMatTableOfContentDirective, "[onemrvaMatToc]", never, { "onemrvaMatToc": { "alias": "onemrvaMatToc"; "required": false; }; "hiddenInToc": { "alias": "hiddenInToc"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { OnemrvaMatTableOfContentComponent, OnemrvaMatTableOfContentDirective, OnemrvaMatTableOfContentService, OnemrvaMatTocAnchorLevel, OnemrvaMatTocAnchorStatus };
+export type { OnemrvaMatToc, OnemrvaMatTocAnchor };

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

@@ -0,0 +1,57 @@
+:host {
+  position: fixed;
+  width: var(--toc-width, 280px);
+  top: var(--layout-header-height, 82px);
+  left: 0;
+  bottom: 0;
+  overflow: auto;
+  background-color: var(--mat-sys-surface-container);
+  padding: var(--triple-spacer) var(--spacer) var(--spacer) var(--triple-spacer);
+  box-sizing: border-box;
+
+  .onemrva-mat-toc-title {
+    color: var(--mat-sys-secondary);
+    line-height: 1.5rem;
+    margin-bottom: var(--double-spacer);
+  }
+
+  mat-list {
+    padding: 0;
+
+    mat-list-item {
+      padding: var(--half-spacer) 0 var(--half-spacer) var(--spacer);
+      height: 2rem !important;
+      border-left: 1px solid var(--mat-sys-outline-variant);
+
+      &.onemrva-mat-hidden-toc-anchor {
+        display: none;
+      }
+
+      .mdc-list-item__primary-text {
+        font-weight: 600;
+        color: var(--mat-sys-outline);
+      }
+
+      &.active-anchor {
+        border-left: 3px solid var(--mat-sys-secondary);
+        padding-left: 6px;
+
+        .mdc-list-item__primary-text {
+          color: var(--mat-sys-outline-variant);
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      mat-icon {
+        vertical-align: bottom !important;
+
+        &.anchor-warning {
+          color: var(--mat-sys-secondary);
+        }
+      }
+    }
+  }
+}

package/mat-task-list/index.d.ts

@@ -0,0 +1,57 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, TemplateRef, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+declare class OnemrvaMatTaskTitleComponent implements AfterViewInit {
+    customNgClass: string[];
+    template?: TemplateRef<any>;
+    cd: ChangeDetectorRef;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTaskTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTaskTitleComponent, "onemrva-mat-task-title", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatTaskContentComponent {
+    customNgClass: string[];
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTaskContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTaskContentComponent, "onemrva-mat-task-content", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatTaskComponent implements AfterViewInit {
+    customNgClass: any;
+    icon: string | undefined;
+    form: FormControl | undefined;
+    bubble: string | undefined;
+    arialLabel: string;
+    /** @hidden @internal */
+    disabled: boolean;
+    private hostClass;
+    get showAriaDisabled(): boolean;
+    template: TemplateRef<any>;
+    title?: OnemrvaMatTaskTitleComponent;
+    content?: OnemrvaMatTaskContentComponent;
+    cd: ChangeDetectorRef;
+    elRef: ElementRef<any>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTaskComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTaskComponent, "onemrva-mat-task", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "form": { "alias": "form"; "required": false; }; "bubble": { "alias": "bubble"; "required": false; }; "arialLabel": { "alias": "arialLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "content"], never, true, never>;
+}
+
+declare class OnemrvaMatTaskListComponent implements AfterViewInit {
+    id: string;
+    data_cy: string;
+    _tasks?: QueryList<OnemrvaMatTaskComponent>;
+    cd: ChangeDetectorRef;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTaskListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTaskListComponent, "onemrva-mat-task-list", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; }, {}, ["_tasks"], ["*"], true, never>;
+}
+
+declare class OnemrvaMatTaskListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTaskListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatTaskListModule, never, [typeof OnemrvaMatTaskListComponent, typeof OnemrvaMatTaskTitleComponent, typeof OnemrvaMatTaskContentComponent, typeof OnemrvaMatTaskComponent], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatTaskListModule>;
+}
+
+export { OnemrvaMatTaskComponent, OnemrvaMatTaskContentComponent, OnemrvaMatTaskListComponent, OnemrvaMatTaskListModule, OnemrvaMatTaskTitleComponent };

package/mat-task-list/src/onemrva-mat-task-content.scss

@@ -0,0 +1,11 @@
+.onemrva-mat-task-content {
+  margin-top: var(--double-spacer);
+  margin-left: calc(var(--spacer) * 10);
+
+  p:last-child {
+    margin: 0;
+  }
+  &.disabled {
+    color: var(--mat-sys-outline-variant);
+  }
+}

package/mat-task-list/src/onemrva-mat-task-list.component.scss

@@ -1,150 +0,0 @@
-@use '../../utils' as utils;
-
-@mixin taskList($theme) {
-  $panel-border-radius: 16px;
-  $panel-margin: 16px;
-  $panel-border-color: utils.palette($theme, 'primary', 50);
-  $panel-padding: 24px;
-
-  // Get the primary color palette from the color-config.
-  $primary: utils.palette($theme, 'primary');
-  onemrva-mat-task {
-    border-radius: $panel-border-radius;
-    border: 1px solid $panel-border-color;
-    padding: $panel-padding;
-    display: block;
-    position: relative;
-    margin-bottom: $panel-margin;
-
-    .onemrva-mat-task-content,
-    .onemrva-mat-task-title {
-      margin-left: 80px;
-    }
-
-    .onemrva-mat-task-content {
-      margin-top: 16px;
-
-      p:last-child {
-        margin: 0;
-      }
-    }
-
-    .onemrva-mat-task-title {
-      font-family: utils.fontFamily($theme, 'headline-1');
-      font-style: normal;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 35px;
-    }
-
-    .onemrva-mat-task-icon {
-      float: left;
-      position: absolute;
-      top: 50%;
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-      width: 50px;
-      text-align: center;
-
-      .mat-checkbox .mat-checkbox-ripple {
-        left: calc(50% - 10px);
-        top: calc(50% - 10px);
-        height: 20px;
-        width: 20px;
-      }
-
-      span.bubble {
-        display: block;
-        text-align: center;
-        color: utils.palette($theme, 'primary', '500-contrast');
-        font-size: 24px;
-        width: 40px;
-        height: 40px;
-        line-height: 40px;
-        border: 2px solid utils.palette($theme, 'primary', '500-contrast');
-        background: $primary;
-        border-radius: 50%;
-        outline: 1px solid $primary;
-
-        mat-icon {
-          font-size: 24px;
-          margin-top: 8px;
-          line-height: 24px;
-        }
-      }
-    }
-
-    &.mat-primary {
-      @include taskStyle($theme, 'primary');
-    }
-
-    &.mat-accent {
-      @include taskStyle($theme, 'accent');
-    }
-
-    &.mat-warn {
-      @include taskStyle($theme, 'warn');
-    }
-
-    &.mat-grayscale {
-      @include taskStyle($theme, 'grayscale');
-    }
-
-    &.mat-info {
-      @include taskStyle($theme, 'info');
-    }
-
-    &.mat-success {
-      @include taskStyle($theme, 'success');
-    }
-
-    &.mat-error {
-      @include taskStyle($theme, 'error');
-    }
-
-    &.mat-disabled {
-      .onemrva-mat-task-icon {
-        mat-icon {
-          color: utils.palette($theme, 'grayscale', '400-contrast');
-        }
-
-        span {
-          mat-icon {
-            color: utils.palette($theme, 'grayscale', '500-contrast');
-          }
-
-          color: utils.palette($theme, 'grayscale', '500-contrast');
-          background: utils.palette($theme, 'grayscale', 400);
-          outline: 1px solid utils.palette($theme, 'grayscale', 400);
-        }
-      }
-      .onemrva-mat-task-title,
-      .onemrva-mat-task-content {
-        color: utils.palette($theme, 'grayscale', 400);
-      }
-    }
-  }
-}
-
-@mixin taskStyle($theme, $color, $weight: 500) {
-  border: none;
-  background: utils.palette($theme, $color, 50);
-
-  .onemrva-mat-task-title {
-    color: utils.palette($theme, $color, $weight);
-  }
-  .onemrva-mat-task-icon {
-    mat-icon {
-      color: utils.palette($theme, $color, $weight);
-    }
-
-    span {
-      mat-icon {
-        color: utils.palette($theme, $color, '500-contrast');
-      }
-      color: utils.palette($theme, $color, '500-contrast');
-      background: utils.palette($theme, $color, $weight);
-      outline: 1px solid utils.palette($theme, $color, $weight);
-    }
-  }
-}

package/mat-task-list/src/onemrva-mat-task-title.scss

@@ -0,0 +1,16 @@
+.onemrva-mat-task-title {
+  font: var(--mat-sys-headline-small);
+  margin-left: calc(var(--spacer) * 10);
+  &.disabled {
+    color: var(--mat-sys-outline-variant);
+  }
+  &.mat-primary,
+  &.mat-secondary,
+  &.mat-tertiary,
+  &.mat-success,
+  &.mat-info,
+  &.mat-error,
+  &.mat-warn {
+    color: var(--mat-sys-primary);
+  }
+}

package/mat-task-list/src/onemrva-mat-task.component.scss

@@ -0,0 +1,67 @@
+:host {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--mat-sys-outline-variant);
+  padding: var(--triple-spacer);
+  display: block;
+  align-items: center;
+  position: relative;
+  margin-bottom: var(--doube-spacer);
+
+  &[class*='mat-'] {
+    background: var(--mat-sys-primary-container);
+    border: none;
+  }
+
+  .onemrva-mat-task-icon {
+    position: absolute;
+    float: left;
+    width: 3rem;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .mat-checkbox .mat-checkbox-ripple {
+      left: calc(50% - 10px);
+      top: calc(50% - 10px);
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    span.bubble {
+      display: block;
+      text-align: center;
+      color: var(--mat-sys-on-primary);
+      font-size: 1.5rem;
+      width: 2.5rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      border: 2px solid var(--mat-sys-on-primary);
+      background: var(--mat-sys-primary);
+      border-radius: 50%;
+      outline: 1px solid var(--mat-sys-primary);
+
+      mat-icon {
+        font-size: 24px;
+        margin-top: 8px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  &.disabled {
+    .onemrva-mat-task-icon {
+      mat-icon {
+        color: var(--mat-sys-on-primary);
+      }
+
+      span {
+        color: var(--mat-sys-on-primary);
+        background: var(--mat-sys-outline);
+        outline: 1px solid var(--mat-sys-outline);
+        mat-icon {
+          color: var(--mat-sys-outline);
+        }
+      }
+    }
+  }
+}