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

package/mat-side-menu/src/onemrva-mat-side-menu.component.scss

@@ -1,49 +1,47 @@
-@use '../../utils';
+:host {
+  // LEGACY CODE, will be removed in the future
 
-@mixin sideMenu($theme) {
-  onemrva-mat-side-menu {
-    $divider: utils.palette($theme, 'grayscale', 900, 0.12);
+  $divider: var(--mat-sys-surface-bright);
 
-    $grey-1: utils.palette($theme, 'grayscale', 900);
-    $grey-3: utils.palette($theme, 'grayscale', 700);
-    $grey-8: utils.palette($theme, 'grayscale', 300);
-    $grey-12: utils.palette($theme, 'grayscale', 50);
+  $grey-1: #312f3b;
+  $grey-3: #6f6d77;
+  $grey-8: #d1d0d7;
+  $grey-12: #f6f5f9;
 
-    mat-chip-list {
-      width: 100%;
+  mat-chip-list {
+    width: 100%;
+  }
+  .onemrva-side-menu-option {
+    color: $grey-1;
+    background-color: $grey-12;
+    &:hover {
+      cursor: pointer;
+      background-color: $grey-8;
     }
-    .onemrva-side-menu-option {
-      color: $grey-1;
-      background-color: $grey-12;
-      &:hover {
-        cursor: pointer;
-        background-color: $grey-8;
-      }
-      &.onemrva-side-menu-current-option {
-        background-color: $grey-8;
-      }
+    &.onemrva-side-menu-current-option {
+      background-color: $grey-8;
     }
-    .onemrva-expanded-side-menu {
-      width: 250px;
-      border: 1px solid $divider;
-      border-radius: 20px;
+  }
+  .onemrva-expanded-side-menu {
+    width: 250px;
+    border: 1px solid $divider;
+    border-radius: 20px;
 
-      .onemrva-side-menu-header {
-        border-radius: 20px 20px 0 0;
-        padding: 27px 30px 25px;
-        background-color: $grey-3;
-        color: white;
-        font-weight: 700;
-        text-transform: uppercase;
-      }
+    .onemrva-side-menu-header {
+      border-radius: 20px 20px 0 0;
+      padding: 27px 30px 25px;
+      background-color: $grey-3;
+      color: white;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
 
-      .onemrva-side-menu-option {
-        border-top: 1px solid $divider;
-        padding: 20px 30px;
+    .onemrva-side-menu-option {
+      border-top: 1px solid $divider;
+      padding: 20px 30px;
 
-        &:last-child {
-          border-radius: 0 0 20px 20px;
-        }
+      &:last-child {
+        border-radius: 0 0 20px 20px;
       }
     }
   }

package/mat-skeleton/index.d.ts

@@ -0,0 +1,100 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges } from '@angular/core';
+import { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
+
+type OnemrvaSkeletonLoaderConfigTheme = Record<string, any> | null;
+declare const OnemrvaMatSkeletonAnimations: {
+    PULSE: "pulse";
+    PROGRESS: "progress";
+    NONE: "none";
+};
+type OnemrvaMatSkeletonAnimations = (typeof OnemrvaMatSkeletonAnimations)[keyof typeof OnemrvaMatSkeletonAnimations];
+declare const OnemrvaMatSkeletoTypes: {
+    H1: "h1";
+    H2: "h2";
+    H3: "h3";
+    H4: "h4";
+    H5: "h5";
+    H6: "h6";
+    BUTTON: "button";
+    CIRCLE: "circle";
+    SQUARE: "square";
+    CUSTOM: "custom";
+    LINE: "";
+};
+type OnemrvaMatSkeletoTypes = (typeof OnemrvaMatSkeletoTypes)[keyof typeof OnemrvaMatSkeletoTypes];
+
+/**
+ * Skeleton provides a way to display loading element while page is loading.
+ *
+ * @MatModule OnemrvaMatSkeletonModule
+ *
+ * @MatKeywords skeleton, loading, progress
+ *
+ * @example
+ * ```html
+ * <onemrva-mat-skeleton type="avatar" size="large">
+ * </onemrva-mat-skeleton>
+ * ```
+ */
+declare class OnemrvaMatSkeletonComponent implements OnInit, OnChanges {
+    count: number;
+    animation: OnemrvaMatSkeletonAnimations;
+    type: OnemrvaMatSkeletoTypes;
+    size: OnemrvaMatSize;
+    theme: OnemrvaSkeletonLoaderConfigTheme;
+    ariaLabel: string;
+    role: string;
+    loadingText: string;
+    id: string;
+    /** @hidden @internal */
+    get _isProgress(): boolean;
+    /** @hidden @internal */
+    get _isPulse(): boolean;
+    /** @hidden @internal */
+    get isH1(): boolean;
+    /** @hidden @internal */
+    get isH2(): boolean;
+    /** @hidden @internal */
+    get isH3(): boolean;
+    /** @hidden @internal */
+    get isH4(): boolean;
+    /** @hidden @internal */
+    get isH5(): boolean;
+    /** @hidden @internal */
+    get isH6(): boolean;
+    /** @hidden @internal */
+    get _isLine(): boolean;
+    /** @hidden @internal */
+    get _isButton(): boolean;
+    /** @hidden @internal */
+    get _isCircle(): boolean;
+    /** @hidden @internal */
+    get _isSquare(): boolean;
+    /** @hidden @internal */
+    get _isCustom(): boolean;
+    /** @hidden @internal */
+    get _isXSmallSize(): boolean;
+    /** @hidden @internal */
+    get _isSmallSize(): boolean;
+    /** @hidden @internal */
+    get _isMediumSize(): boolean;
+    /** @hidden @internal */
+    get _isLargeSize(): boolean;
+    /** @hidden @internal */
+    get _isXLargeSize(): boolean;
+    items: any[];
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatSkeletonComponent, "onemrva-mat-skeleton", never, { "count": { "alias": "count"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "role": { "alias": "role"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatSkeletonModule, never, [typeof OnemrvaMatSkeletonComponent], [typeof OnemrvaMatSkeletonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatSkeletonModule>;
+}
+
+export { OnemrvaMatSkeletoTypes, OnemrvaMatSkeletonAnimations, OnemrvaMatSkeletonComponent, OnemrvaMatSkeletonModule };
+export type { OnemrvaSkeletonLoaderConfigTheme };

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

@@ -1,38 +1,11 @@
-onemrva-mat-skeleton {
+:host {
   &.circle,
   &.square {
-    --size: 56px;
-    --resize: 12px;
-
-    &.extrasmall {
-      --size: 32px;
-      --font-size: 12px;
-      --resize: 4px;
-    }
-
-    &.small {
-      --size: 40px;
-      --font-size: 16px;
-      --resize: 8px;
-    }
-
-    &.large {
-      --size: 72px;
-      --font-size: 32px;
-      --resize: 16px;
-    }
-
-    &.extralarge {
-      --resize: 22px;
-      --size: 124px;
-      --font-size: 60px;
-    }
-
     .skeleton-loader {
-      width: var(--size);
-      height: var(--size);
-      margin-top: var(--resize);
-      margin-left: var(--resize);
+      width: var(--avatar-size);
+      height: var(--avatar-size);
+      margin-top: var(--avatar-resize);
+      margin-left: var(--avatar-resize);
     }
   }
 
@@ -70,7 +43,7 @@ onemrva-mat-skeleton {
     .skeleton-loader {
       height: 36px;
       width: 120px;
-      border-radius: 500px;
+      border-radius: var(--button-border-radius);
     }
   }
 
@@ -81,15 +54,15 @@ onemrva-mat-skeleton {
   */
   &.progress {
     .skeleton-loader {
+      // position: relative;
+      // this adds GPU acceleration
+      transform: translate3d(0, 0, 0);
+
       &:after,
       &:before {
         box-sizing: border-box;
       }
 
-      // position: relative;
-      // this adds GPU acceleration
-      transform: translate3d(0, 0, 0);
-
       &:before {
         animation: progress 2s ease-in-out infinite;
         background-size: 200px 100%;
@@ -184,25 +157,3 @@ onemrva-mat-skeleton {
     }
   }
 }
-
-// CSS Animation Keyframes
-@keyframes progress {
-  0% {
-    transform: translate3d(-200px, 0, 0);
-  }
-  100% {
-    transform: translate3d(calc(200px + 100vw), 0, 0);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/mat-spinner/index.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { OnInit, ElementRef, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
+
+declare class OnemrvaMatSpinnerComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatSpinnerComponent, "onemrva-mat-spinner", never, {}, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatLoadingDirective implements OnInit {
+    loading: boolean;
+    element: ElementRef<any>;
+    viewContainerRef: ViewContainerRef;
+    componentFactoryResolver: ComponentFactoryResolver;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatLoadingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OnemrvaMatLoadingDirective, "button[loading]", never, { "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatSpinnerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatSpinnerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatSpinnerModule, never, [typeof OnemrvaMatSpinnerComponent, typeof OnemrvaMatLoadingDirective], [typeof OnemrvaMatSpinnerComponent, typeof OnemrvaMatLoadingDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatSpinnerModule>;
+}
+
+export { OnemrvaMatLoadingDirective, OnemrvaMatSpinnerComponent, OnemrvaMatSpinnerModule };

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

@@ -0,0 +1,21 @@
+:host {
+  .onemrva-spinner-container {
+    position: relative;
+    height: 3.25rem;
+    right: 3.25rem;
+  }
+
+  .onemrva-spinner {
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 52px;
+      width: 52px;
+      box-sizing: border-box;
+      animation: 1s rotate infinite linear;
+      fill: var(--mat-sys-primary);
+    }
+  }
+}

package/mat-stepper/index.d.ts

@@ -0,0 +1,36 @@
+import { StepperOrientation } from '@angular/cdk/stepper';
+import * as i0 from '@angular/core';
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import * as i2 from '@angular/material/stepper';
+import { MatStepper, MatStep } from '@angular/material/stepper';
+import { Subject } from 'rxjs';
+
+declare class OnemrvaMatStepperComponent extends MatStepper implements AfterContentInit, OnDestroy {
+    destroyNotifier$: Subject<void>;
+    /** Orientation of the summary-stepper. */
+    get orientation(): StepperOrientation;
+    set orientation(value: StepperOrientation);
+    matStepperVertical: boolean;
+    ariaOrientation: string;
+    role: string;
+    _animationDone: Subject<any>;
+    private readonly dir;
+    private readonly cd;
+    private readonly elementRef;
+    scrollToElement(elementId: string): void;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    _stepIsNavigable(index: number, step: MatStep): boolean;
+    _getIndicatorType(index: number, state?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatStepperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatStepperComponent, "onemrva-mat-stepper, onemrva-mat-vertical-stepper, [onemrvaMatStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatStepperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatStepperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatStepperModule, never, [typeof OnemrvaMatStepperComponent], [typeof i2.MatStepperModule, typeof OnemrvaMatStepperComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatStepperModule>;
+}
+
+export { OnemrvaMatStepperComponent, OnemrvaMatStepperModule };

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

@@ -1,112 +1,47 @@
-//@use '../../../../node_modules/@angular/cdk/index';
-@use 'sass:math';
-
-@use 'stepper-variables';
-
-.mat-stepper-vertical {
-  display: block;
-}
-
-.mat-vertical-stepper-header {
-  display: flex;
-  align-items: center;
-
-  // We can't use `max-height` here, because it breaks the flexbox centering in IE.
-  height: stepper-variables.$label-header-height;
-
-  .mat-step-icon {
-    margin-right: stepper-variables.$vertical-stepper-content-margin -
-      stepper-variables.$side-gap;
-
-    [dir='rtl'] & {
-      margin-right: 0;
-      margin-left: stepper-variables.$vertical-stepper-content-margin -
-        stepper-variables.$side-gap;
-    }
+:host {
+  &.mat-stepper-animations-enabled .mat-vertical-content-container {
+    transition: grid-template-rows var(--mat-stepper-animation-duration, 0)
+      cubic-bezier(0.4, 0, 0.2, 1);
   }
-}
-
-.mat-vertical-content-container {
-  //@include cdk.high-contrast(active, off) {
-  //  outline: solid 1px;
-  //}
-
-  margin-left: stepper-variables.$vertical-stepper-content-margin;
-  border: 0;
-  position: relative;
-
-  [dir='rtl'] & {
-    margin-left: 0;
-    margin-right: stepper-variables.$vertical-stepper-content-margin;
+  .mat-step-header {
+    overflow: hidden;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    height: 24px;
+    padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px;
+    background-color: var(--mat-sys-surface-container-low);
+    z-index: 10;
   }
-}
-
-.mat-stepper-vertical-line::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  border-left-width: stepper-variables.$line-width;
-  border-left-style: solid;
-
-  [dir='rtl'] & {
-    left: auto;
-    right: 0;
-  }
-}
-
-.mat-vertical-stepper-content {
-  overflow: hidden;
-  outline: 0;
-}
-
-.mat-vertical-content {
-  padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap
-    stepper-variables.$side-gap;
-}
-
-.mat-step:last-child {
   .mat-vertical-content-container {
-    border: none;
-  }
-}
-
-onemrva-mat-vertical-stepper {
-  .mat-vertical-stepper-content {
-    .mat-step-summary {
-      height: auto;
-      opacity: 1;
-      overflow: inherit;
-      transition:
-        height 0s 1s,
-        opacity 1s linear;
+    display: grid;
+    grid-template-rows: 0fr;
+    grid-template-columns: 100%;
+    margin-left: 36px;
+    border: 0;
+    position: relative;
+    .mat-vertical-content {
+      margin: var(--spacer);
+      padding: 0 1.5rem 1.5rem 1.5rem;
     }
-    .mat-step-form {
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
-      transition: none;
-
-      mat-form-field {
-        opacity: 0;
-      }
-    }
-    &[aria-expanded='true'] {
-      .mat-step-summary {
-        height: 0;
-        opacity: 0;
-        overflow: hidden;
-        transition: none;
-      }
-      .mat-step-form {
-        height: auto;
-        opacity: 1;
-        transition:
-          height 0s 1s,
-          opacity 1s linear;
-        overflow: inherit;
-        mat-form-field {
-          opacity: 1;
-        }
+    &.mat-stepper-vertical-line {
+      &:before {
+        content: '';
+        position: absolute;
+        border-left-width: 1px;
+        border-left-style: solid;
+        border-left-color: var(--mat-sys-outline-variant);
+        top: calc(
+          8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2)
+        );
+        bottom: calc(
+          8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2)
+        );
+        --mat-stepper-header-height: 3rem;
+        left: var(--spacer);
       }
     }
   }

package/mat-sticker/index.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from '@angular/core';
+
+declare class OnemrvaMatStickerComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatStickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatStickerComponent, "onemrva-mat-sticker", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatStickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatStickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatStickerModule, never, [typeof OnemrvaMatStickerComponent], [typeof OnemrvaMatStickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatStickerModule>;
+}
+
+export { OnemrvaMatStickerComponent, OnemrvaMatStickerModule };

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

@@ -1,65 +1,28 @@
-@use '../../utils' as utils;
-
-@mixin sticker($theme) {
-  onemrva-mat-sticker {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-flex;
-    align-items: center;
-    cursor: default;
-    background: #ffffff !important;
-    opacity: 1;
-    border-radius: 4px;
-    padding: 2px 8px;
-
-    font-family: utils.fontFamily($theme, 'headline-1');
-    font-size: 12px;
-    font-weight: 600;
-    box-sizing: border-box;
-    line-height: 21px;
-
-    &.mat-primary {
-      $color: utils.palette($theme, 'primary');
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-success {
-      $color: utils.palette($theme, 'success', 600);
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-warn {
-      $color: utils.palette($theme, 'warn', 600);
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-info {
-      $color: utils.palette($theme, 'info');
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-grayscale {
-      $color: utils.palette($theme, 'grayscale');
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-error {
-      $color: utils.palette($theme, 'error');
-      border: 2px solid $color;
-      color: $color;
-    }
-
-    &.mat-accent {
-      $color: utils.palette($theme, 'primary', '500-contrast');
-      background: utils.gradient($theme) !important;
-      border: none;
-      color: $color;
-    }
+:host {
+  $paddingY: 2px;
+  $paddingX: 8px;
+  $borderWidth: 2px;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+  background: var(--mat-sys-surface);
+  opacity: 1;
+  border-radius: var(--small-border-radius);
+  padding: $paddingY $paddingX;
+  font: var(--mat-sys-label-medium);
+  box-sizing: border-box;
+  border: 2px solid var(--mat-sys-primary);
+  color: var(--mat-sys-primary);
+
+  &.mat-accent {
+    background: var(--background-gradient) !important;
+    border: none;
+    // We need to make up for the border changing
+    padding: calc($paddingY + $borderWidth) calc($paddingX + $borderWidth);
+    color: var(--on-background-gradient);
   }
 }