@onemrvapublic/design-system-theme 20.3.0-develop.4 → 20.3.0-develop.6

package/overrides/_form-field.scss

@@ -19,6 +19,9 @@
   );
 
   mat-form-field {
+    padding: var(--spacer);
+    //margin-bottom: var(--spacer);
+
     .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
       .mdc-notched-outline--upgraded {
         .mdc-floating-label--float-above {
@@ -92,128 +95,69 @@
   /* BEGINNING - HERE TO FORCE READONLY STATE */
   // TODO : should use the var as much as possible !!
 
-  .onemrva-readonly {
+  .onemrva-readonly,
+  form.onemrva-readonly {
     pointer-events: none;
-    input,
-    select,
-    textarea {
-      &::placeholder {
-        opacity: 0 !important;
-      }
+    &,
+    * {
+      cursor: not-allowed !important;
     }
 
-    @include mat.form-field-overrides(
-      (
-        outlined-outline-width: 0px,
-        outlined-focus-outline-width: 0px,
-        container-text-weight: 700,
-        outlined-label-text-weight: var(--mat-sys-label-small-weight),
-        subscript-text-weight: bold,
-      )
-    );
+    &:not(.mat-form-field-disabled),
+    mat-form-field:not(.mat-form-field-disabled) {
+      input,
+      select,
+      textarea {
+        &::placeholder {
+          opacity: 0 !important;
+        }
+      }
 
-    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)
+      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)
+          )
+        );
+      }
     }
   }
-
-  //mat-form-field.onemrva-readonly,
-  //.onemrva-readonly {
-  //  margin: var(--spacer-and-half) 0;
-  //  pointer-events: none;
-  //  input,
-  //  textarea {
-  //    &::placeholder {
-  //      opacity: 0;
-  //    }
-  //    font-weight: 700;
-  //  }
-  //  .mat-mdc-select {
-  //    .mat-mdc-select-arrow {
-  //      display: none; /* hide the dropdown arrow */
-  //    }
-  //    &.mat-mdc-select-disabled .mat-mdc-select-trigger {
-  //      opacity: 1;
-  //      color: inherit;
-  //    }
-  //    .mat-mdc-text-field-wrapper {
-  //      background: transparent;
-  //    }
-  //  }
-  //  .mat-mdc-form-field-icon-suffix,
-  //  .mat-mdc-form-field-icon-prefix {
-  //    display: none;
-  //  }
-  //
-  //  .mat-mdc-form-field-focus-overlay,
-  //  .mdc-line-ripple {
-  //    display: none !important;
-  //  }
-  //
-  //
-  //
-  //  .mdc-text-field--outlined:not(.mdc-text-field--disabled)
-  //    .mat-mdc-notch-piece {
-  //    border: 0;
-  //  }
-  //
-  //  .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;
-  //    }
-  //  }
-  //
-  //  .mdc-text-field--outlined:not(
-  //      .mdc-text-field--disabled
-  //    ).mdc-text-field--focused
-  //    .mdc-notched-outline
-  //    .mat-mdc-notch-piece {
-  //    border-width: 0;
-  //  }
-  //
-  //  .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);
-  //  }
-  //
-  //  .onemrva-input-phone-number .onemrva-text-number {
-  //    padding-left: 0 !important;
-  //  }
-  //
-  //  .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,
-  //  mat-timepicker-toggle,
-  //  mat-datepicker-toggle,
-  //  .mat-mdc-form-field-text-prefix {
-  //    display: none;
-  //  }
-  //}
-  /* 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.4",
+    "version": "v20.3.0-develop.6",
     "publishConfig": {
         "access": "public"
     },