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

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

@@ -0,0 +1,146 @@
+@use '@angular/material' as mat;
+
+:host {
+  .paginator-container {
+    display: flex;
+    align-items: baseline;
+
+    .paginator-size-selector-container {
+      flex: 1 0 200px;
+      display: flex;
+      align-items: baseline;
+      justify-content: flex-start;
+      gap: var(--double-spacer);
+
+      mat-divider {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 var(--spacer);
+        height: 1.5rem;
+      }
+      .paginator-size-selector {
+        max-width: 80px;
+        @include mat.select-overrides(
+          (
+            trigger-text-font: var(--mat-sys-label-medium-font),
+            trigger-text-size: var(--mat-sys-label-medium-size),
+            trigger-text-line-height: var(--mat-sys-label-medium-height),
+          )
+        );
+        @include mat.form-field-overrides(
+          (
+            container-height: var(--paginator-height),
+            outlined-container-shape: calc(var(--paginator-height) / 2),
+            container-vertical-padding: var(--half-spacer),
+            outlined-outline-color: var(--mat-sys-outline-variant),
+            outlined-focus-outline-color: var(--mat-sys-outline-variant),
+            outlined-hover-outline-color: var(--mat-sys-outline-variant),
+            outlined-outline-width: 1px,
+            outlined-focus-outline-width: 2px,
+          )
+        );
+      }
+      //  .mat-mdc-select-arrow-wrapper {
+      //    //transform: translateY(8%);
+      //    .mat-mdc-select-arrow {
+      //      color: var(--mat-sys-primary);
+      //    }
+      //  }
+      //
+      //  .mdc-notched-outline {
+      //    border: 1px solid var(--mat-sys-on-surface);
+      //    border-radius: var(--button-border-radius);
+      //  }
+      //
+      //  .mdc-notched-outline__leading,
+      //  .mdc-notched-outline__trailing,
+      //  .mdc-notched-outline__notch {
+      //    --mdc-outlined-text-field-container-shape: 0;
+      //    border: none;
+      //  }
+      //
+      //  .mat-mdc-text-field-wrapper {
+      //    height: 38px;
+      //  }
+      //
+      //  .mat-mdc-form-field-infix {
+      //    width: 60px;
+      //  }
+      //  .mat-mdc-select-trigger {
+      //    padding-left: var(--spacer);
+      //    padding-right: var(--spacer);
+      //  }
+      //}
+    }
+    .onemrva-mat-paginator {
+      display: flex;
+
+      button {
+        background-color: var(--mat-sys-background);
+        padding: var(--spacer) var(--double-spacer);
+        text-align: center;
+        border: 1px solid var(--mat-sys-outline-variant);
+        border-right: none;
+        color: var(--mat-sys-primary);
+        transition: all 200ms;
+
+        &:disabled {
+          color: var(--mat-sys-outline-variant);
+        }
+
+        &.onemrva-mat-paginator-btn {
+          font: var(--mat-sys-label-medium);
+        }
+
+        &:first-child {
+          border-radius: 18px 0 0 18px;
+          width: initial;
+          padding: var(--spacer) var(--double-spacer);
+        }
+
+        &:last-child {
+          border-radius: 0 18px 18px 0;
+          border-right: 1px solid var(--mat-sys-outline-variant);
+          width: initial;
+          padding: var(--spacer) var(--double-spacer);
+        }
+
+        &:hover:not(:disabled):not(.onemrva-mat-paginator-current-index) {
+          background: var(--background-gradient);
+          color: white;
+          cursor: pointer;
+        }
+
+        &.onemrva-mat-paginator-current-index {
+          background: var(--background-gradient);
+          color: white;
+        }
+      }
+    }
+  }
+
+  // Get the primary color palette from the color-config.
+  //var(--mat-sys-primary): utils.palette($theme, 'primary');
+  //$dark-primary: utils.palette(
+  //  $theme,
+  //  'primary',
+  //  700
+  //); // HWKTODO accent instead?
+  //
+  //var(--background-gradient): utils.gradient($theme);
+  //$accent: utils.palette($theme, 'accent');
+  //$dark-accent: utils.palette($theme, 'accent', 700);
+  //
+  //$disabled: utils.palette($theme, 'grayscale');
+  //
+  //$field-divider: utils.palette($theme, 'grayscale', 700);
+  //$divider: utils.palette($theme, 'grayscale', 900, 0.12);
+
+  //.mat-mdc-text-field-wrapper.mdc-text-field--outlined
+  //  .mat-mdc-form-field-infix {
+  //  padding: var(--quarter-spacer) 0 var(--spacer) 0;
+  //  display: flex;
+  //  align-items: center;
+  //}
+  //
+}

package/mat-panel/index.d.ts

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
+
+declare class OnemrvaMatPanelTitleActionComponent {
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelTitleActionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelTitleActionComponent, "onemrva-mat-panel-title-action", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatPanelTitleComponent implements AfterViewInit {
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    content?: OnemrvaMatPanelTitleActionComponent;
+    toggleButtonReference: ElementRef | null;
+    private readonly cd;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelTitleComponent, "onemrva-mat-panel-title", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, ["content"], ["*"], true, never>;
+}
+
+declare class OnemrvaMatPanelContentComponent {
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelContentComponent, "onemrva-mat-panel-content", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatPanelIconComponent {
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelIconComponent, "onemrva-mat-panel-icon", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatPanelComponent implements AfterViewInit {
+    id: string;
+    data_cy: string;
+    disabled: boolean;
+    panel?: OnemrvaMatPanelComponent;
+    title?: OnemrvaMatPanelTitleComponent;
+    content: OnemrvaMatPanelContentComponent;
+    icon?: OnemrvaMatPanelIconComponent;
+    expandable: boolean;
+    expanded: i0.InputSignal<boolean>;
+    expandedChange: i0.OutputEmitterRef<boolean>;
+    error?: string;
+    private readonly cd;
+    onChangeState(val: boolean): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelComponent, "onemrva-mat-panel", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, ["panel", "title", "content", "icon"], never, true, never>;
+}
+
+declare class OnemrvaMatPanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatPanelModule, never, [typeof OnemrvaMatPanelComponent, typeof OnemrvaMatPanelTitleComponent, typeof OnemrvaMatPanelContentComponent, typeof OnemrvaMatPanelTitleActionComponent, typeof OnemrvaMatPanelIconComponent], [typeof OnemrvaMatPanelComponent, typeof OnemrvaMatPanelTitleComponent, typeof OnemrvaMatPanelContentComponent, typeof OnemrvaMatPanelTitleActionComponent, typeof OnemrvaMatPanelIconComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatPanelModule>;
+}
+
+declare class MatExpansionPanelHeaderArrowDivider {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelHeaderArrowDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanelHeaderArrowDivider, "mat-expansion-panel-header-arrow-divider", never, {}, {}, never, never, true, never>;
+}
+
+export { MatExpansionPanelHeaderArrowDivider, OnemrvaMatPanelComponent, OnemrvaMatPanelContentComponent, OnemrvaMatPanelIconComponent, OnemrvaMatPanelModule, OnemrvaMatPanelTitleActionComponent, OnemrvaMatPanelTitleComponent };

package/mat-panel/src/mat-expansion-panel-header-arrow-divider.scss

@@ -0,0 +1,11 @@
+:host {
+  span {
+    position: absolute;
+    top: 1.55rem;
+    right: 3.4rem;
+    display: inline-flex;
+    border-left: 1px solid var(--mat-sys-outline-variant);
+    height: 30px;
+    margin: 0;
+  }
+}

package/mat-panel/src/onemrva-mat-panel-content.scss

@@ -0,0 +1,8 @@
+.onemrva-mat-panel-content {
+  margin-top: var(--double-spacer);
+  color: var(--mat-sys-on-surface);
+
+  p:last-child {
+    margin: 0;
+  }
+}

package/mat-panel/src/onemrva-mat-panel-icon.scss

@@ -0,0 +1,7 @@
+.onemrva-mat-panel-icon {
+  float: left;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}

package/mat-panel/src/onemrva-mat-panel-title.scss

@@ -0,0 +1,13 @@
+.onemrva-mat-panel-title {
+  font: var(--mat-sys-title-large);
+  color: var(--mat-panel-title-color);
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.is-expandable {
+  .onemrva-mat-panel-title {
+    width: calc(100% - 50px);
+  }
+}

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

@@ -1,101 +1,94 @@
-@use '../../utils';
+@use '@angular/material' as mat;
 
-@mixin panel($theme) {
-  $panel-border-radius: 16px;
-  $panel-border-color: utils.palette($theme, 'primary', 50);
-  $panel-padding: 24px;
+:host {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--mat-sys-outline-variant);
+  padding: var(--triple-spacer);
+  display: block;
+  position: relative;
+  background: var(--mat-sys-surface-container-lowest);
 
-  onemrva-mat-panel {
-    border-radius: $panel-border-radius;
-    border: 1px solid $panel-border-color;
-    padding: $panel-padding;
-    display: block;
-    position: relative;
-    background-color: utils.palette($theme, 'primary', '500-contrast');
+  --mat-expansion-header-expanded-state-height: 80px;
+  --mat-expansion-header-collapsed-state-height: 80px;
+  --mat-expansion-container-background-color: transparant;
 
-    &.has-icon {
-      .onemrva-mat-panel-content,
-      .onemrva-mat-panel-title {
-        margin-left: 80px;
-      }
-    }
+  --mat-panel-title-color: var(--test-title-color-panel, inherit);
 
-    .onemrva-mat-panel-icon {
-      float: left;
-      position: absolute;
-      top: 50%;
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-    }
+  &.mat-primary {
+    --mat-panel-title-color: var(--mat-sys-on-primary-container);
+    --mat-expansion-container-background-color: var(
+      --mat-sys-primary-container
+    );
+  }
 
-    .onemrva-mat-panel-content {
-      margin-top: 16px;
-      p:last-child {
-        margin: 0;
-      }
-    }
-    .onemrva-mat-panel-title {
-      font-family: utils.fontFamily($theme, 'headline-1');
-      font-style: normal;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 35px;
-      .onemrva-mat-panel-title-action {
-        float: right;
-      }
-    }
+  &.is-expandable {
+    padding: 0;
 
-    &.mat-accent {
-      border: none;
-      background: utils.gradient($theme);
-      color: white;
-    }
-    &.mat-primary {
-      border: none;
-      background: utils.palette($theme, 'primary', 50);
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'grayscale', 900);
+    mat-expansion-panel.mat-expanded {
+      mat-expansion-panel-header.mat-expansion-panel-header {
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
       }
     }
-    &.mat-warn {
-      border: none;
-      background: utils.palette($theme, 'warn', 50);
 
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'warn', 500);
-      }
+    mat-expansion-panel-header.mat-expansion-panel-header {
+      padding: 0 var(--triple-spacer);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
-    &.mat-grayscale {
-      border: none;
-      background: utils.palette($theme, 'grayscale', 50);
 
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'grayscale', 500);
-      }
+    .mat-expansion-panel {
+      border-radius: var(--border-radius);
     }
-    &.mat-info {
-      border: none;
-      background: utils.palette($theme, 'info', 50);
+  }
 
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'info', 500);
-      }
-    }
-    &.mat-success {
-      border: none;
-      background: utils.palette($theme, 'success', 50);
+  &[class*=' mat-'],
+  &[class^='mat-'] {
+    background: var(--mat-sys-primary-container);
+    color: var(--mat-sys-on-primary-container);
+    //border: none;
+  }
+  &.mat-accent {
+    background: var(--background-gradient);
+    color: var(--on-background-gradient);
+    border: none;
 
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'success', 500);
-      }
+    @include mat.form-field-overrides(
+      (
+        outlined-label-text-color: var(--on-background-gradient),
+        outlined-outline-color: var(--on-background-gradient),
+        outlined-focus-label-text-color: var(--on-background-gradient),
+        outlined-focus-outline-color: var(--on-background-gradient),
+        outlined-hover-label-text-color: var(--on-background-gradient),
+        outlined-hover-outline-color: var(--on-background-gradient),
+        outlined-input-text-color: var(--on-background-gradient),
+        outlined-input-text-placeholder-color: var(--on-background-gradient),
+      )
+    );
+
+    @include mat.select-overrides(
+      (
+        enabled-arrow-color: var(--on-background-gradient),
+        focused-arrow-color: var(--on-background-gradient),
+        placeholder-text-color: var(--on-background-gradient),
+        enabled-trigger-text-color: var(--on-background-gradient),
+      )
+    );
+  }
+
+  a {
+    color: var(--mat-sys-on-surface);
+  }
+
+  &.has-icon {
+    .right-content {
+      margin-left: calc(var(--spacer) * 10);
     }
-    &.mat-error {
-      border: none;
-      background: utils.palette($theme, 'error', 50);
+  }
 
-      .onemrva-mat-panel-title {
-        color: utils.palette($theme, 'error', 500);
-      }
+  .onemrva-mat-panel-content {
+    margin-top: var(--double-spacer);
+    p:last-child {
+      margin: 0;
     }
   }
 }

package/mat-pop-over/index.d.ts

@@ -0,0 +1,40 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, AfterViewInit } from '@angular/core';
+
+declare class OnemrvaMatPopOverTriggerComponent {
+    dataCy: string;
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPopOverTriggerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPopOverTriggerComponent, "onemrva-mat-pop-over-trigger", never, { "dataCy": { "alias": "dataCy"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatPopOverContentComponent {
+    dataCy: string;
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPopOverContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPopOverContentComponent, "onemrva-mat-pop-over-content", never, { "dataCy": { "alias": "dataCy"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatPopOverComponent implements AfterViewInit {
+    isOpen: boolean;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    dataCyTrigger: string;
+    dataCyPo: string;
+    poId: string;
+    trigger?: OnemrvaMatPopOverTriggerComponent;
+    content?: OnemrvaMatPopOverContentComponent;
+    private readonly cd;
+    ngAfterViewInit(): void;
+    togglePopOver(): void;
+    closePopOver(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPopOverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPopOverComponent, "onemrva-mat-pop-over", never, { "position": { "alias": "position"; "required": false; }; "dataCyTrigger": { "alias": "dataCyTrigger"; "required": false; }; "dataCyPo": { "alias": "dataCyPo"; "required": false; }; "poId": { "alias": "poId"; "required": false; }; }, {}, ["trigger", "content"], never, true, never>;
+}
+
+declare class OnemrvaMatPopOverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPopOverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatPopOverModule, never, [typeof OnemrvaMatPopOverComponent, typeof OnemrvaMatPopOverContentComponent, typeof OnemrvaMatPopOverTriggerComponent], [typeof OnemrvaMatPopOverComponent, typeof OnemrvaMatPopOverContentComponent, typeof OnemrvaMatPopOverTriggerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatPopOverModule>;
+}
+
+export { OnemrvaMatPopOverComponent, OnemrvaMatPopOverContentComponent, OnemrvaMatPopOverModule, OnemrvaMatPopOverTriggerComponent };

package/mat-pop-over/src/onemrva-mat-pop-over.component.scss

@@ -32,13 +32,13 @@
 }
 
 .onemrva-pop-over-content {
-  padding: 16px;
+  padding: var(--double-spacer);
   box-sizing: border-box;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.32);
+  //box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.32); // TODO check what to do with this
   border-radius: 4px;
   width: 32rem;
-  background-color: white;
-  margin: 16px 0;
+  background-color: var(--mat-sys-surface-container-high);
+  margin: var(--double-spacer) 0;
   position: relative;
 
   h1,
@@ -62,7 +62,7 @@
   &.bottom-right {
     &:before {
       border-right: 9px solid transparent;
-      border-bottom: 9px solid lightGrey;
+      border-bottom: 9px solid var(--mat-sys-surface-container-high);
       border-left: 9px solid transparent;
 
       top: -9px;
@@ -71,7 +71,7 @@
 
     &:after {
       border-right: 8px solid transparent;
-      border-bottom: 8px solid white;
+      border-bottom: 8px solid var(--mat-sys-surface-container-high);
       border-left: 8px solid transparent;
 
       top: -8px;
@@ -91,7 +91,7 @@
 
     &:after {
       border-right: 8px solid transparent;
-      border-bottom: 8px solid white;
+      border-bottom: 8px solid var(--mat-sys-surface-container-high);
       border-left: 8px solid transparent;
 
       top: -8px;
@@ -102,7 +102,7 @@
   &.top-left {
     &:before {
       border-right: 9px solid transparent;
-      border-top: 9px solid lightGrey;
+      border-top: 9px solid var(--mat-sys-surface-container-high);
       border-left: 9px solid transparent;
 
       bottom: -9px;
@@ -111,7 +111,7 @@
 
     &:after {
       border-right: 8px solid transparent;
-      border-top: 8px solid white;
+      border-top: 8px solid var(--mat-sys-surface-container-high);
       border-left: 8px solid transparent;
 
       bottom: -8px;
@@ -122,7 +122,7 @@
   &.top-right {
     &:before {
       border-right: 9px solid transparent;
-      border-top: 9px solid lightGrey;
+      border-top: 9px solid var(--mat-sys-surface-container-high);
       border-left: 9px solid transparent;
 
       bottom: -9px;
@@ -131,7 +131,7 @@
 
     &:after {
       border-right: 8px solid transparent;
-      border-top: 8px solid white;
+      border-top: 8px solid var(--mat-sys-surface-container-high);
       border-left: 8px solid transparent;
 
       bottom: -8px;

package/mat-progress-bar/index.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+declare class OnemrvaMatProgressBarComponent implements OnInit {
+    label$?: Observable<string>;
+    value$: Observable<number>;
+    dataCy: string;
+    role: string;
+    ariaLabel: string;
+    progress$: Observable<string>;
+    ngOnInit(): void;
+    success: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatProgressBarComponent, "onemrva-mat-progress-bar", never, { "label$": { "alias": "label$"; "required": false; }; "value$": { "alias": "value$"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { OnemrvaMatProgressBarComponent };

package/mat-progress-bar/src/onemrva-mat-progress-bar.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  .onemrva-progress-bar {
+    .onemrva-progress-bar-outer {
+      height: 0.25rem;
+      border-radius: var(--button-border-radius);
+      box-sizing: border-box;
+      overflow: hidden;
+      background-color: var(--mat-sys-outline-variant);
+      .onemrva-progress-bar-inner {
+        background-color: var(--mat-sys-primary);
+        height: 0.25rem;
+        box-sizing: border-box;
+        border-radius: var(--button-border-radius);
+        transition: width 300ms ease-out;
+      }
+    }
+  }
+
+  .onemrva-progress-bar-label {
+    font-size: var(--mat-sys-label-small);
+  }
+
+  .onemrva-progress-bar-outer {
+  }
+}