@onemrvapublic/design-system 22.7.0-develop.6 → 22.7.0-develop.7

package/fesm2022/onemrvapublic-design-system.mjs

@@ -1,5 +1,5 @@
 // Auto-generated — do not edit
-const VERSION = '22.7.0-develop.6';
+const VERSION = '22.7.0-develop.7';
 
 const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;
 

package/fesm2022/onemrvapublic-design-system.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.7.0-develop.6';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.7.0-develop.7';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}

package/mat-choice-chip/src/onemrva-mat-choice-chip.component.scss

@@ -1,8 +1,5 @@
 @use '@angular/material' as mat;
 
-// Sized and spaced like mat-chip (see theme/overrides/_chips.scss): same
-// container height, 12px horizontal padding, and an 18px leading checkmark
-// with an 8px gap when selected, like a selected mat-chip-option.
 .onemrva-theme onemrva-mat-choice-chip {
   @include mat.checkbox-overrides(
     (
@@ -17,7 +14,7 @@
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
-    height: var(--mat-chip-container-height, 38px);
+    height: var(--mat-chip-container-height, 42px);
     user-select: none;
     border: 1px solid var(--mat-sys-primary);
     border-radius: var(--chip-border-radius);
@@ -54,10 +51,10 @@
       > label {
         padding: 0 12px;
         color: var(--mat-sys-primary);
-        font-family: var(--mat-sys-label-large-font);
-        font-size: var(--mat-sys-label-large-size);
-        font-weight: var(--mat-sys-label-large-weight);
-        line-height: var(--mat-sys-label-large-line-height);
+        font-family: var(--mat-sys-body-large-font);
+        font-size: var(--mat-sys-body-large-size);
+        font-weight: var(--mat-sys-body-large-weight);
+        line-height: var(--mat-sys-body-large-line-height);
         white-space: nowrap;
       }
     }
@@ -93,7 +90,7 @@
       .mdc-form-field {
         .mdc-checkbox {
           width: 18px;
-          margin-left: 8px;
+          margin-left: var(--spacer-and-half);
           visibility: visible;
         }
 

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

@@ -3,14 +3,18 @@
 :host {
   .paginator-container {
     display: flex;
-    align-items: baseline;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--double-spacer);
     font: var(--mat-sys-label-medium);
 
     .paginator-size-selector-container {
-      flex: 1 0 200px;
+      flex: 1 1 auto;
+      min-width: 0;
       display: flex;
-      align-items: baseline;
+      align-items: center;
       justify-content: flex-start;
+      flex-wrap: wrap;
       gap: var(--spacer);
 
       mat-divider {
@@ -20,21 +24,20 @@
         height: 1.5rem;
       }
       .paginator-size-selector {
-        max-width: 80px;
         padding: 0;
 
         @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),
+            trigger-text-line-height: var(--mat-sys-label-medium-line-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),
+            container-vertical-padding: var(--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),
@@ -42,13 +45,47 @@
             outlined-focus-outline-width: 2px,
           )
         );
+
+        ::ng-deep {
+          .mat-mdc-text-field-wrapper {
+            padding-left: var(--double-spacer);
+            padding-right: var(--double-spacer);
+          }
+
+          .mat-mdc-form-field-infix {
+            width: auto;
+            min-width: 0;
+          }
+
+          .mat-mdc-select {
+            display: flex;
+          }
+
+          .mat-mdc-select-trigger {
+            height: var(--mat-sys-label-medium-line-height);
+          }
+
+          .mat-mdc-select-value {
+            width: auto;
+            flex: 0 0 auto;
+          }
+
+          .mat-mdc-select-arrow-wrapper {
+            height: auto;
+            padding-left: var(--spacer);
+          }
+        }
       }
     }
 
     .onemrva-mat-paginator {
       display: flex;
+      max-width: 100%;
+      overflow-x: auto;
+      scrollbar-width: thin;
 
       button {
+        flex: 0 0 auto;
         background-color: var(--mat-sys-surface);
         padding: var(--spacer) var(--double-spacer);
         text-align: center;

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

@@ -19,7 +19,7 @@ $_accent: map.get(palette.$palette, primary); // or secondary / info / …
   opacity: 1;
   border-radius: var(--half-border-radius);
   padding: 0 var(--spacer);
-  font: var(--mat-sys-label-medium);
+  font: var(--mat-sys-body-small);
   border: 1px solid var(--mat-sys-primary);
   color: var(--mat-sys-primary);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "22.7.0-develop.6",
+  "version": "22.7.0-develop.7",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"

package/theme/overrides/_card.scss

@@ -5,11 +5,11 @@
   @include mat.card-overrides(
     (
       title-text-font: var(--mat-sys-title-large-font),
-      title-text-line-height: var(--mat-sys-title-large-height),
+      title-text-line-height: var(--mat-sys-title-large-line-height),
       title-text-size: var(--mat-sys-title-large-size),
       title-text-weight: var(--mat-sys-title-large-weight),
       subtitle-text-font: var(--mat-sys-label-small-font),
-      subtitle-text-line-height: var(--mat-sys-label-small-height),
+      subtitle-text-line-height: var(--mat-sys-label-small-line-height),
       subtitle-text-size: var(--mat-sys-label-small-size),
       subtitle-text-weight: var(--mat-sys-label-small-weight),
       elevated-container-shape: var(--border-radius),

package/theme/overrides/_checkbox.scss

@@ -10,9 +10,9 @@
       selected-focus-state-layer-color: var(--mat-sys-primary),
       selected-hover-state-layer-color: var(--mat-sys-primary),
       selected-pressed-state-layer-color: var(--mat-sys-primary),
-      label-text-size: var(--mat-sys-label-large-size),
-      label-text-weight: var(--mat-sys-label-large-weight),
-      label-text-line-height: var(--mat-sys-label-large-height),
+      label-text-size: var(--mat-sys-body-medium-size),
+      label-text-weight: var(--mat-sys-body-medium-weight),
+      label-text-line-height: var(--mat-sys-body-medium-line-height),
     )
   );
 
@@ -21,6 +21,12 @@
       padding-left: 0;
     }
 
+    &:not(.onemrva-choice-chip) .mat-internal-form-field > label {
+      margin-left: calc(
+        var(--spacer) - (var(--mat-checkbox-state-layer-size, 40px) - 18px) / 2
+      );
+    }
+
     .mdc-checkbox__native-control:enabled:checked,
     .mdc-checkbox__native-control:enabled:indeterminate {
       ~ .mdc-checkbox__background {

package/theme/overrides/_chips.scss

@@ -7,17 +7,23 @@
       container-shape-radius: var(--chip-border-radius),
       outline-color: var(--mat-sys-primary),
       elevated-container-color: var(--mat-sys-primary-container),
-      container-height: 38px,
+      container-height: 42px,
       label-text-color: var(--mat-sys-primary),
-      label-text-font: var(--mat-sys-label-large-font),
-      label-text-size: var(--mat-sys-label-large-size),
-      label-text-line-height: var(--mat-sys-label-large-height),
+      label-text-font: var(--mat-sys-body-large-font),
+      label-text-size: var(--mat-sys-body-large-size),
+      label-text-weight: var(--mat-sys-body-large-weight),
+      label-text-line-height: var(--mat-sys-body-large-line-height),
       with-trailing-icon-trailing-icon-color: var(--mat-sys-primary),
     )
   );
   mat-chip-option,
   mat-chip-row,
   mat-chip {
+    .mat-mdc-chip-remove.mdc-evolution-chip__action--trailing {
+      padding-left: var(--spacer);
+      padding-right: var(--spacer-and-half);
+    }
+
     &.mat-accent:not(.mat-mdc-chip-disabled) {
       background: var(--background-gradient);
       @include mat.chips-overrides(

package/theme/overrides/_fab.scss

@@ -7,6 +7,10 @@
       small-container-shape: var(--button-border-radius),
       extended-container-shape: var(--mat-sys-corner-full),
       extended-container-height: 2.5rem,
+      extended-label-text-font: var(--mat-sys-body-medium-font),
+      extended-label-text-size: var(--mat-sys-body-medium-size),
+      extended-label-text-weight: var(--mat-sys-body-medium-weight),
+      extended-label-text-tracking: normal,
     )
   );
 

package/theme/overrides/_tabs.scss

@@ -7,10 +7,10 @@
       active-focus-indicator-color: var(--mat-sys-tertiary),
       active-hover-indicator-color: var(--mat-sys-tertiary),
       active-indicator-height: 3px,
-      label-text-font: var(--mat-sys-title-medium-font),
-      label-text-size: var(--mat-sys-title-medium-size),
+      label-text-font: var(--mat-sys-body-large-font),
+      label-text-size: var(--mat-sys-body-large-size),
       //label-text-weight: var(--mat-sys-title-medium-weight),
-      label-text-line-height: var(--mat-sys-title-medium-height),
+      label-text-line-height: var(--mat-sys-body-large-line-height),
     )
   );
 

package/theme/utilities/_fonts.scss

@@ -100,9 +100,9 @@
       title-medium-line-height: 1.75rem,
       title-medium-weight: 600,
 
-      title-small: 600 0.938rem/1.3125rem Poppins,
+      title-small: 600 0.9375rem/1.3125rem Poppins,
       title-small-font: Poppins,
-      title-small-size: 0.938rem,
+      title-small-size: 0.9375rem,
       title-small-line-height: 1.3125rem,
       title-small-weight: 600,
 
@@ -126,22 +126,22 @@
       body-small-weight: 400,
 
       // LABEL
-      label-large: 500 1rem/1.3125rem Source Sans Pro,
-      label-large-font: Source Sans Pro,
+      label-large: 500 1rem/1.3125rem Poppins,
+      label-large-font: Poppins,
       label-large-size: 1rem,
       label-large-line-height: 1.3125rem,
       label-large-weight: 500,
 
-      label-medium: 400 0.875rem/1.3125rem Source Sans Pro,
-      label-medium-font: Source Sans Pro,
+      label-medium: 400 0.875rem/1.3125rem Poppins,
+      label-medium-font: Poppins,
       label-medium-size: 0.875rem,
       label-medium-line-height: 1.3125rem,
       label-medium-weight: 400,
 
-      label-small: 400 0.75rem/1.3125rem Source Sans Pro,
+      label-small: 400 0.75rem/1.125rem Source Sans Pro,
       label-small-font: Source Sans Pro,
       label-small-size: 0.75rem,
-      label-small-line-height: 1.3125rem,
+      label-small-line-height: 1.125rem,
       label-small-weight: 400,
 
       level1: 0px 3px 3px 0px rgba(49, 47, 59, 0.32),

package/types/onemrvapublic-design-system.d.ts

@@ -1,4 +1,4 @@
-declare const VERSION = "22.7.0-develop.6";
+declare const VERSION = "22.7.0-develop.7";
 
 declare const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;