@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/theme/overrides/_drag-and-drop.scss

@@ -0,0 +1,74 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  .cdk-drag-placeholder {
+    background: var(--mat-sys-primary-container);
+    border: 2px dotted var(--mat-sys-primary);
+    min-height: 3.5rem;
+    border-radius: var(--half-border-radius);
+    margin-bottom: var(--spacer);
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  .cdk-drag-preview {
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background: var(--mat-sys-primary-container);
+  }
+  .cdk-drop-list-dragging {
+    cursor: grabbing;
+    .cdk-drag:not(.cdk-drag-placeholder) {
+      height: auto !important;
+    }
+  }
+
+  .cdk-drag:not(.mat-mdc-chip):not(tr):not(mat-row) {
+    position: relative;
+    display: flex;
+    cursor: grab;
+    //  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+    background-color: var(--mat-sys-surface-container);
+    padding: var(--double-spacer) var(--double-spacer) var(--double-spacer)
+      calc(var(--spacer) * 7);
+    border-radius: var(--half-border-radius);
+    margin-bottom: var(--spacer);
+
+    &:before {
+      border-radius: var(--half-border-radius) 0 0 var(--half-border-radius);
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      font-family: var(--icon-font);
+      content: '\e945';
+      align-items: center;
+      display: inline-flex;
+      padding: var(--double-spacer) var(--spacer);
+      //padding: 15px 10px 15px 14px; // THe icon is slightly narrower than in the DS so it's shifted to the left so as to be centered
+      color: var(--mat-sys-primary);
+      background-color: var(--mat-sys-surface-container);
+      width: 1.5rem;
+      font-size: 2rem;
+    }
+  }
+
+  trn mat-row {
+    &.cdk-drag-preview {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      //padding: 0 0 var(--double-spacer) 0;
+      overflow: hidden;
+      border-radius: var(--half-border-radius);
+    }
+    .cdk-drag-preview {
+      height: 2.8rem;
+    }
+    &.cdk-drag-placeholder {
+      opacity: 0.2;
+    }
+  }
+}

package/theme/overrides/_expansion.scss

@@ -0,0 +1,51 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.expansion-overrides(
+    (
+      container-shape: none,
+      header-text-font: var(--mat-sys-title-small-font),
+      header-text-size: var(--mat-sys-title-small-size),
+      header-hover-state-layer-color: transparent,
+      container-text-weight: var(--mat-sys-label-medium-weight),
+    )
+  );
+
+  .mat-expansion-panel {
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
+
+    // Ensure expansion panels are full width
+    // In wave they caused misalignment
+    .mat-expansion-panel-header {
+      padding: 0;
+
+      .mat-expansion-indicator {
+        margin-right: 12px;
+      }
+    }
+
+    .mat-expansion-panel-header-title {
+      align-items: center;
+      display: flex;
+      gap: var(--spacer);
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 0;
+      }
+      &:after {
+        content: '';
+        width: 130px;
+        height: 1px;
+        background: var(--mat-sys-outline-variant);
+        flex: 1000000 0 10px;
+      }
+    }
+  }
+}

package/theme/overrides/_fab.scss

@@ -0,0 +1,45 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.fab-overrides(
+    (
+      container-shape: var(--button-border-radius),
+      small-container-shape: var(--button-border-radius),
+    )
+  );
+  button {
+    &.mat-mdc-fab-base {
+      &.mat-accent {
+        background: var(--background-gradient);
+        color: var(--on-background-gradient);
+      }
+      &.mat-primary,
+      &.mat-secondary,
+      &.mat-tertiary,
+      &.mat-success,
+      &.mat-info,
+      &.mat-error,
+      &.mat-warn {
+        @include mat.fab-overrides(
+          (
+            container-color: var(--mat-sys-primary),
+            small-container-color: var(--mat-sys-primary),
+            foreground-color: var(--mat-sys-on-primary),
+            small-foreground-color: var(--mat-sys-on-primary),
+          )
+        );
+      }
+      &.mat-neutral,
+      &.mat-grayscale {
+        @include mat.fab-overrides(
+          (
+            container-color: var(--mat-sys-primary-container),
+            small-container-color: var(--mat-sys-primary-container),
+            foreground-color: var(--mat-sys-on-primary-container),
+            small-foreground-color: var(--mat-sys-on-primary-container),
+          )
+        );
+      }
+    }
+  }
+}

package/theme/overrides/_form-field.scss

@@ -0,0 +1,223 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use '../utilities/palettes' as palettes;
+
+@mixin defaultSubscriptElements() {
+  background-color: var(--mat-sys-error-container);
+  padding: 0 var(--spacer-and-half) 0
+    calc(var(--triple-spacer) + var(--spacer-and-half));
+  font: var(--mat-sys-label-small);
+  border-bottom: 1px solid var(--mat-sys-error);
+
+  &:before {
+    font-size: 1rem;
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 24;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: var(--icon-font);
+    position: relative;
+    top: var(--half-spacer);
+    margin-left: calc(-1 * var(--triple-spacer));
+    padding-right: var(--half-spacer);
+  }
+}
+
+// hint or error as type value
+@mixin formFieldSubscript($type) {
+  .mat-mdc-form-field-#{$type}-wrapper {
+    padding: 0;
+
+    .mat-mdc-form-field-hint-spacer {
+      display: none;
+    }
+
+    @if $type == error {
+      mat-error {
+        @include defaultSubscriptElements();
+
+        &:before {
+          content: '\e000';
+        }
+      }
+    }
+
+    @if $type == hint {
+      // The mat-warn is set by the color directive
+      mat-hint {
+        padding-top: var(--half-spacer);
+      }
+
+      mat-hint.mat-warn {
+        @include defaultSubscriptElements();
+
+        width: 100%;
+        background-color: var(--mat-sys-primary-container);
+        border-bottom: 1px solid var(--mat-sys-primary);
+        color: var(--mat-sys-primary);
+        padding: 0
+          var(--spacer-and-half)
+          var(--half-spacer)
+          calc(var(--triple-spacer) + var(--spacer-and-half));
+
+        &:before {
+          content: '\e002';
+        }
+      }
+    }
+  }
+}
+
+@mixin override() {
+  @include mat.form-field-overrides(
+    (
+      outlined-label-text-color: var(--mat-sys-on-surface),
+      outlined-focus-label-text-color: var(--mat-sys-on-surface),
+      outlined-hover-label-text-color: var(--mat-sys-on-surface),
+      container-height: var(--input-height),
+      container-vertical-padding: var(--spacer-and-half),
+      outlined-outline-color: var(--mat-sys-outline-variant),
+      outlined-focus-outline-color: var(--mat-sys-on-surface),
+      outlined-hover-outline-color: var(--mat-sys-on-surface),
+      outlined-outline-width: 1px,
+      outlined-focus-outline-width: 2px,
+      outlined-label-text-weight: var(--mat-sys-label-small-weight),
+      outlined-input-text-placeholder-color: var(--mat-sys-outline),
+      container-text-weight: var(--mat-sys-label-small-weight),
+    )
+  );
+
+  mat-form-field {
+    padding: var(--spacer);
+    //margin-bottom: var(--spacer);
+
+    .mat-mdc-form-field-subscript-wrapper {
+      @include formFieldSubscript(error);
+      @include formFieldSubscript(hint);
+    }
+
+    .mat-mdc-form-field-required-marker {
+      @include mat.form-field-overrides(
+        (
+          outlined-label-text-color: var(--mat-sys-error),
+        )
+      );
+      color: var(--mat-form-field-outlined-label-text-color);
+    }
+
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+      .mdc-notched-outline--upgraded {
+        .mdc-floating-label--float-above {
+          --mat-form-field-container-height: 44px;
+          --mat-mdc-form-field-floating-label-scale: 0.75;
+          --mat-mdc-form-field-label-transform: translateY(
+              calc(
+                calc(
+                    6.75px + var(--mat-form-field-container-height, 56px) / 2
+                  ) *
+                  -1.1
+              )
+            )
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+        }
+      }
+    }
+
+    &.mat-warn,
+    &.force-warn {
+      .mat-mdc-form-field-subscript-wrapper {
+        .mat-mdc-form-field-error-wrapper {
+          mat-error {
+            background-color: var(--mat-sys-primary-container);
+            border-bottom: 1px solid var(--mat-sys-primary);
+            &:before {
+              content: '\e002';
+            }
+          }
+        }
+      }
+      @include mat.form-field-overrides(
+        (
+          outlined-error-caret-color: var(--mat-sys-primary),
+          outlined-error-focus-outline-color: var(--mat-sys-primary),
+          outlined-error-focus-label-text-color: var(--mat-sys-primary),
+          outlined-error-hover-label-text-color: var(--mat-sys-primary),
+          outlined-error-hover-outline-color: var(--mat-sys-primary),
+          outlined-error-label-text-color: var(--mat-sys-primary),
+          outlined-error-outline-color: var(--mat-sys-primary),
+        )
+      );
+    }
+  }
+
+  /* BEGINNING - HERE TO FORCE READONLY STATE */
+  // TODO : should use the var as much as possible !!
+
+  .onemrva-readonly,
+  form.onemrva-readonly {
+    pointer-events: none;
+    &,
+    * {
+      cursor: not-allowed !important;
+    }
+
+    &:not(.mat-form-field-disabled),
+    mat-form-field:not(.mat-form-field-disabled) {
+      input,
+      select,
+      textarea {
+        &::placeholder {
+          opacity: 0 !important;
+        }
+      }
+
+      mat-label,
+      label {
+        pointer-events: none !important;
+      }
+
+      .mat-select-counter,
+      button[type='submit'] {
+        display: none !important;
+      }
+
+      @include mat.form-field-overrides(
+        (
+          outlined-outline-width: 0px,
+          outlined-focus-outline-width: 0px,
+          outlined-label-text-weight: var(--mat-sys-label-small-weight),
+          subscript-text-weight: bold,
+        )
+      );
+
+      mat-hint,
+      .mat-mdc-form-field-icon-suffix,
+      .mat-mdc-select-arrow-wrapper,
+      .mat-mdc-select-placeholder,
+      .mat-mdc-form-field-icon-prefix {
+        display: none;
+      }
+      .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+        padding-left: max(
+          16px,
+          var(
+              --mat-form-field-outlined-container-shape,
+              var(--mat-sys-corner-extra-small)
+            ) +
+            4px
+        );
+      }
+      .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
+        padding-right: max(
+          16px,
+          var(
+            --mat-form-field-outlined-container-shape,
+            var(--mat-sys-corner-extra-small)
+          )
+        );
+      }
+    }
+  }
+}

package/theme/overrides/_icon-button.scss

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  button {
+    &.mdc-icon-button {
+      &.small {
+        --mdc-icon-button-state-layer-size: calc(var(--icon-size-small) * 1.5);
+        --mdc-icon-button-icon-size: var(--icon-size-small);
+        mat-icon {
+          height: var(--icon-size-small);
+          font-size: var(--icon-size-small);
+          width: var(--icon-size-small);
+        }
+      }
+    }
+
+    &.onemrva-icon-button.mat-mdc-icon-button {
+      .mat-mdc-button-persistent-ripple::before {
+        --mat-icon-button-state-layer-color: var(--mat-sys-surface);
+      }
+    }
+  }
+}

package/theme/overrides/_icon.scss

@@ -0,0 +1,97 @@
+@mixin override() {
+  mat-icon {
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 300,
+      'GRAD' 0,
+      'opsz' 24;
+
+    &.xsmall {
+      font-size: var(--icon-size-xsmall);
+      line-height: var(--icon-size-xsmall);
+      height: var(--icon-size-xsmall);
+      width: var(--icon-size-xsmall);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 12;
+    }
+
+    &.small {
+      font-size: var(--icon-size-small);
+      line-height: var(--icon-size-small);
+      height: var(--icon-size-small);
+      width: var(--icon-size-small);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 16;
+    }
+
+    &.medium {
+      height: var(--icon-size-medium);
+      width: var(--icon-size-medium);
+      line-height: var(--icon-size-medium);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 20;
+    }
+
+    &.large {
+      font-size: var(--icon-size-large);
+      line-height: var(--icon-size-large);
+      height: var(--icon-size-large);
+      width: var(--icon-size-large);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24;
+    }
+
+    &.xlarge {
+      font-size: var(--icon-size-xlarge);
+      line-height: var(--icon-size-xlarge);
+      height: var(--icon-size-xlarge);
+      width: var(--icon-size-xlarge);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 300,
+        'GRAD' 0,
+        'opsz' 62;
+    }
+
+    &.xxlarge {
+      font-size: var(--icon-size-xxlarge);
+      line-height: var(--icon-size-xxlarge);
+      height: var(--icon-size-xxlarge);
+      width: var(--icon-size-xxlarge);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 300,
+        'GRAD' 0,
+        'opsz' 40;
+    }
+
+    &.mat-primary,
+    &.mat-secondary,
+    &.mat-tertiary,
+    &.mat-success,
+    &.mat-info,
+    &.mat-error,
+    &.mat-warn,
+    &.mat-neutral,
+    &.mat-grayscale,
+    &.mat-accent {
+      color: var(--mat-sys-primary);
+    }
+
+    &.filled {
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+}

package/theme/overrides/_input.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  &.mat-focused,
+  &:hover {
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing {
+        border-width: 2px;
+      }
+
+      .mdc-notched-outline__notch {
+        border-width: 2px;
+      }
+    }
+  }
+}

package/theme/overrides/_layout.scss

@@ -0,0 +1,35 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  //&:not(.light-theme) {
+  //  @media (prefers-color-scheme: dark) {
+  //    header {
+  //      .logo {
+  //        filter: brightness(0) invert(1);
+  //      }
+  //      .application-title {
+  //        color: var(--mat-sys-on-surface) !important;
+  //      }
+  //    }
+  //  }
+  //}
+
+  &.dark-theme {
+    header {
+      .logo {
+        filter: brightness(0) invert(1);
+      }
+      .application-title {
+        color: var(--mat-sys-on-surface);
+      }
+    }
+  }
+
+  .bkg {
+    .mat-drawer-content {
+      background-image: var(--background-error-page);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+}

package/theme/overrides/_menu.scss

@@ -0,0 +1,45 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.menu-overrides(
+    (
+      container-color: var(--mat-sys-surface),
+      item-with-icon-leading-spacing: var(--double-spacer),
+      item-with-icon-trailing-spacing: var(--double-spacer),
+      item-label-text-line-height: var(--quad-spacer),
+      container-shape: 0,
+      item-leading-spacing: var(--double-spacer),
+      item-trailing-spacing: var(--double-spacer),
+      container-elevation-shadow: none,
+      item-hover-state-layer-color: var(--mat-sys-surface-container-low),
+      item-focus-state-layer-color: var(--mat-sys-surface-container-low),
+    )
+  );
+}
+
+.layout-menu-offset {
+  margin-top: 28px;
+  margin-left: -16px;
+}
+
+.mat-mdc-menu-panel {
+  border: 1px solid var(--mat-sys-outline-variant);
+  box-shadow: unset;
+}
+
+.mat-mdc-menu-item {
+  min-height: 38px !important;
+}
+
+.mat-mdc-menu-item-text {
+  display: flex;
+}
+
+.language-trigger__menu-item {
+  display: flex;
+  min-width: 200px;
+
+  img {
+    width: 22px;
+  }
+}

package/theme/overrides/_option.scss

@@ -0,0 +1,15 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.option-overrides(
+    (
+      label-text-size: var(--mat-sys-body-medium-size),
+      label-text-weight: var(--mat-sys-body-medium-weight),
+      label-text-font: var(--mat-sys-body-medium-font),
+      label-text-line-height: var(--mat-sys-body-medium-line-height),
+    )
+  );
+  .mat-radio-inner-circle {
+    background: var(--background-gradient);
+  }
+}

package/theme/overrides/_panel.scss

@@ -0,0 +1,59 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  //&:not(.light-theme) {
+  //  onemrva-mat-panel {
+  //    &[class^='mat-'] {
+  //      @media (prefers-color-scheme: dark) {
+  //        @include mat.form-field-overrides(
+  //          (
+  //            outlined-label-text-color: var(--mat-sys-on-background),
+  //            outlined-outline-color: var(--mat-sys-on-background),
+  //            outlined-focus-label-text-color: var(--mat-sys-on-background),
+  //            outlined-focus-outline-color: var(--mat-sys-on-background),
+  //            outlined-hover-label-text-color: var(--mat-sys-on-background),
+  //            outlined-hover-outline-color: var(--mat-sys-on-background),
+  //            outlined-input-text-placeholder-color: var(--mat-sys-outline),
+  //          )
+  //        );
+  //        @include mat.select-overrides(
+  //          (
+  //            enabled-arrow-color: var(--mat-sys-on-background),
+  //            focused-arrow-color: var(--mat-sys-on-background),
+  //            placeholder-text-color: var(--mat-sys-on-background),
+  //            enabled-trigger-text-color: var(--mat-sys-on-background),
+  //          )
+  //        );
+  //      }
+  //    }
+  //  }
+  //}
+  &.dark-theme {
+    onemrva-mat-panel {
+      onemrva-mat-panel {
+        &[class^='mat-'] {
+          @include mat.form-field-overrides(
+            (
+              outlined-label-text-color: var(--mat-sys-on-background),
+              outlined-outline-color: var(--mat-sys-on-background),
+              outlined-focus-label-text-color: var(--mat-sys-on-background),
+              outlined-focus-outline-color: var(--mat-sys-on-background),
+              outlined-hover-label-text-color: var(--mat-sys-on-background),
+              outlined-hover-outline-color: var(--mat-sys-on-background),
+              outlined-input-text-color: var(--mat-sys-on-background),
+              outlined-input-text-placeholder-color: var(--mat-sys-outline),
+            )
+          );
+          @include mat.select-overrides(
+            (
+              enabled-arrow-color: var(--mat-sys-on-background),
+              focused-arrow-color: var(--mat-sys-on-background),
+              placeholder-text-color: var(--mat-sys-on-background),
+              enabled-trigger-text-color: var(--mat-sys-on-background),
+            )
+          );
+        }
+      }
+    }
+  }
+}