@onemrvapublic/design-system-theme 20.3.0-develop.3 → 20.3.0-develop.5

package/overrides/_form-field.scss

@@ -14,7 +14,7 @@
       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),
+      outlined-label-text-weight: var(--mat-sys-label-small-weight),
     )
   );
 
@@ -90,51 +90,71 @@
   }
 
   /* BEGINNING - HERE TO FORCE READONLY STATE */
-  mat-form-field.onemrva-readonly,
-  .onemrva-readonly {
-    input,
-    textarea {
-      font-weight: 700;
-    }
+  // TODO : should use the var as much as possible !!
 
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled)
-      .mat-mdc-notch-piece {
-      border: 0;
+  .onemrva-readonly,
+  form.onemrva-readonly {
+    pointer-events: none;
+    &,
+    * {
+      cursor: not-allowed !important;
     }
 
-    .mat-mdc-text-field-wrapper.mdc-text-field mdc-text-field--outlined {
-      .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
-          .mdc-text-field--focused
-        ):hover
-        .mat-mdc-notch-piece {
-        border: 0;
+    &:not(.mat-form-field-disabled),
+    mat-form-field:not(.mat-form-field-disabled) {
+      input,
+      select,
+      textarea {
+        &::placeholder {
+          opacity: 0 !important;
+        }
       }
-    }
 
-    .mdc-text-field--outlined:not(
-        .mdc-text-field--disabled
-      ).mdc-text-field--focused
-      .mdc-notched-outline
-      .mat-mdc-notch-piece {
-      border-width: 0;
-    }
+      mat-label,
+      label {
+        pointer-events: none !important;
+      }
 
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
-        .mdc-text-field--focused
-      ):hover
-      .mat-mdc-notch-piece {
-      border-color: var(--mat-form-field-outlined-outline-color);
-    }
+      .mat-select-counter,
+      button[type='submit'] {
+        display: none !important;
+      }
 
-    .onemrva-input-phone-number .onemrva-text-number {
-      padding-left: 0 !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-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,
-    mat-timepicker-toggle,
-    .mat-mdc-form-field-text-prefix {
-      display: none;
+      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)
+          )
+        );
+      }
     }
   }
-  /* END - HERE TO FORCE READONLY STATE */
 }

package/overrides/_select.scss

@@ -10,6 +10,14 @@
       }
     }
   }
+
+  .onemrva-readonly {
+    .mat-mdc-select-value-text,
+    .mat-mdc-select-value {
+      white-space: unset;
+    }
+  }
+
   .cdk-overlay-container {
     .mat-mdc-select-panel {
       //overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v20.3.0-develop.3",
+    "version": "v20.3.0-develop.5",
     "publishConfig": {
         "access": "public"
     },